[실무 React.Js] React-query 데이터 저장하기

데이터 저장 기능은 useMutation 훅을 사용하여 구현할 수 있습니다. 아래는 예시 코드입니다:

import React, { useState } from 'react';
import { useMutation, useQueryClient } from 'react-query';

// 데이터 저장 함수
const saveData = async (data) => {
  const response = await fetch('https://api.example.com/save', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify(data),
  });
  if (!response.ok) {
    throw new Error('데이터 저장에 문제가 있습니다');
  }
  return response.json();
};

const DataSave = () => {
  const queryClient = useQueryClient();
  const [formData, setFormData] = useState({ key1: '', key2: '' });

  // useMutation 훅을 사용하여 데이터를 저장합니다
  const mutation = useMutation(saveData, {
    onSuccess: () => {
      // 저장이 성공하면 데이터를 다시 조회합니다
      queryClient.invalidateQueries('fetchData');
    },
  });

  // 폼 제출 시 호출되는 함수
  const handleSubmit = (event) => {
    event.preventDefault();
    mutation.mutate(formData);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        value={formData.key1}
        onChange={(e) => setFormData({ ...formData, key1: e.target.value })}
        placeholder="Key1"
      />
      <input
        type="text"
        value={formData.key2}
        onChange={(e) => setFormData({ ...formData, key2: e.target.value })}
        placeholder="Key2"
      />
      <button type="submit">저장</button>
      {mutation.isLoading ? (
        <p>저장 중...</p>
      ) : mutation.isError ? (
        <p>저장에 실패했습니다: {mutation.error.message}</p>
      ) : (
        mutation.isSuccess && <p>저장이 완료되었습니다!</p>
      )}
    </form>
  );
};

export default DataSave;

 

• saveData 함수: 서버에 데이터를 저장하는 함수입니다.
• useMutation 훅: React Query를 사용하여 데이터를 저장합니다.
• handleSubmit 함수: 폼 제출 시 호출되어 데이터를 저장합니다.
• queryClient.invalidateQueries: 데이터 저장이 성공하면 해당 쿼리를 무효화하여 데이터를 다시 조회합니다.