(번역) #14: React Query and Forms

// simple-form

function PersonDetail({ id }) {
  const { data } = useQuery({
    queryKey: ['person', id],
    queryFn: () => fetchPerson(id),
  });
  const { register, handleSubmit } = useForm();
  const { mutate } = useMutation({
    mutationFn: (values) => updatePerson(values),
  });

  if (data) {
    return (
      <form onSubmit={handleSubmit(mutate)}>
        <div>
          <label htmlFor="firstName">First Name</label>
          <input {...register('firstName')} defaultValue={data.firstName} />
        </div>
        <div>
          <label htmlFor="lastName">Last Name</label>
          <input {...register('lastName')} defaultValue={data.lastName} />
        </div>
        <input type="submit" />
      </form>
    );
  }

  return 'loading...';
}

// no-default-values

const { data } = useQuery({
  queryKey: ['person', id],
  queryFn: () => fetchPerson(id),
});
// 🚨 이 방식은 폼을 undefined로 초기화 할 것입니다.
const { register, handleSubmit } = useForm({ defaultValues: data });

// separate-form

function PersonDetail({ id }) {
  const { data } = useQuery({
    queryKey: ['person', id],
    queryFn: () => fetchPerson(id),
  });
  const { mutate } = useMutation({
    mutationFn: (values) => updatePerson(values),
  });

  if (data) {
    return <PersonForm person={data} onSubmit={mutate} />;
  }

  return 'loading...';
}

function PersonForm({ person, onSubmit }) {
  const { register, handleSubmit } = useForm({ defaultValues: person });
  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <div>
        <label htmlFor="firstName">First Name</label>
        <input {...register('firstName')} />
      </div>
      <div>
        <label htmlFor="lastName">Last Name</label>
        <input {...register('lastName')} />
      </div>
      <input type= />
    
  );
}

// no-background-updates

// ✅ 백그라운드 업데이트를 비활성화
const { data } = useQuery({
  queryKey: ['person', id],
  queryFn: () => fetchPerson(id),
  staleTime: Infinity,
});

import React from 'react';
import { useQuery, useMutation } from 'react-query';
import { useForm, Controller } from 'react-hook-form';
import { fetchPerson, updatePerson } from './api'; // API 함수들

function PersonDetail({ id }) {
  const { data, isLoading } = useQuery({
    queryKey: ['person', id],
    queryFn: () => fetchPerson(id),
  });

  const { control, handleSubmit } = useForm();
  const { mutate } = useMutation({
    mutationFn: (values) => updatePerson(values),
  });

  if (isLoading) {
    return 'loading...';
  }

  if (data) {
    return (
      <form onSubmit={handleSubmit(mutate)}>
        <div>
          <label htmlFor="firstName">First Name</label>
          <Controller
            name="firstName"
            control={control}
            render={({ field }) => (
              // ✅ 필드 값 (클라이언트 상태) 과
              // 데이터 (서버 상태) 에서 파생된 상태
              <input {...field} value={field.value ?? data.firstName} />
            )}
          />
        </div>
        <div>
          <label =>Last Name
           }
          />
        
        
      
    );
  }

  return 'loading...';
}

export default PersonDetail;

// disabled-submit

const { mutate, isLoading } = useMutation({
  mutationFn: (values) => updatePerson(values)
})
<input type="submit" disabled={isLoading} />

// reset-form

function PersonDetail({ id }) {
  const queryClient = useQueryClient();
  const { data } = useQuery({
    queryKey: ['person', id],
    queryFn: () => fetchPerson(id),
  });
  const { control, handleSubmit, reset } = useForm();
  const { mutate } = useMutation({
    mutationFn: updatePerson,
    // ✅ 무효화는 프로미스를 반환합니다.
    // 따라서 await 사용이 가능합니다.
    onSuccess: () => queryClient.invalidateQueries({ queryKey: ['person', id] }),
  });

  if (data) {
    return (
      <form
        onSubmit={handleSubmit((values) =>
          // ✅ 클라이언트 상태를 undefined로 초기화 합니다.
          mutate(values, { onSuccess: () => reset() }),
        )}>
        <div>
          <label htmlFor="firstName">First Name</label>
          <Controller
            name="firstName"
            control={control}
            render={({ field }) => <input {...field} value={field.value ?? data.firstName} />}
          />
        </div>
        <input type="submit" />
      
    );
  }

  return 'loading...';
}