React Query에서 'useMutation'을 사용하는 방법

데이터를 가져올 때 'useQuery' 후크를 사용하는 방법에 대해 논의한 이전 게시물을 읽었을 것입니다.

따라서 'useQuery'는 데이터를 가져오는 데만 사용되지만 'useMutation'은 백엔드에 대한 게시/넣기 요청에 사용됩니다.

게시물 요청 기능이 있다고 가정 해 보겠습니다.


userApi.js에서

import axios from 'axios'


const api = axios.create({
    baseURL : "https://gorest.co.in/public/v2",
    headers : {'Authorization' : `Bearer ${apiToken}`}
}


export const createUser = (newUser) => api.post("/users",newUser).then(res => res.data);

이 createUser 함수는 사용자 개체를 사용하며 gorest API에 게시됩니다. 토큰의 경우 gorest 웹사이트에 가입하기만 하면 됩니다.

gorest api의 속성인 이름, 이메일, 성별 및 상태를 취하는 양식 페이지를 만들어 봅시다. 여기에서 useState를 사용하여 formData를 처리했습니다.


UserForm.js

import React, {  useState } from 'react'


function UserForm() {
   const [userData,setUserData ] = useState({
        name : '',
        email : '',
        gender : '',
        status : ''
    })

    const handleFormChange = (e) => {
        setUserData(
            {
                ...userData,
                [e.target.name] : e.target.value
            }
        );
    }

    const handleSubmit = (e) => {
        e.preventDefault();
        console.log(userData)

    }

  return (
    <div>
        <form onSubmit={handleSubmit}>
            <div className='field-container'>
            <label htmlFor='name'>Name : </label>
            <input type="text"  name='name' onChange={handleFormChange} value={userData.name}/>
            </div>

            <div className='field-container'>
            <label htmlFor='name'>Email : </label>
            <input type="email"  name='email' onChange={handleFormChange} value={userData.email}/>
            </div>



            <div className='fieldContainer'>
            <label htmlFor='gender'>Gender : </label>
            <input type="radio"  name='gender' onChange={handleFormChange} value='female'/> Female

            <input type="radio"  name='gender' onChange={handleFormChange} value='male'/> Male

            </div>

            <div className='field-container'>
            <label htmlFor='gender'>Status : </label>
            <input type="radio"  name='status' onChange={handleFormChange} value='active'/> Active

            <input type="radio"  name='status' onChange={handleFormChange} value='inactive'/> Inactive

            </div>
            <input type='submit' value={'Submit'} />

        </form>
    </div>
  )
}

export default UserForm

이 양식을 제출하면서 방금 userData 개체를 위로했습니다. 다음 스크린샷에서 출력을 볼 수 있습니다.



따라서 데이터를 게시하려면 기능을 올바르게 트리거해야 합니다. 하지만 useMutation.Let's를 사용하여 어떻게 할 수 있습니까?

import { useMutation } from 'react-query'


const {mutate} = useMutation(createUser);

이 mutate는 필요할 때마다 트리거되어야 하는 함수이며 전송하려는 데이터/페이로드는 이 mutate 함수에 매개변수로 전송되어야 합니다.

내 handleSubmit 함수는 다음과 같습니다.

const handleSubmit = (e) => {
    e.preventDefault();
    mutate(userData);

내가 useQuery에서 처리한 것처럼 데이터 게시를 위해 isLoading을 사용할 수 있습니다. 모든 수정을 통해 UI에 응답을 표시했습니다. 코드를 보자.

import React, {  useState } from 'react'
import { useMutation } from 'react-query'
import {createUser} from './userApi'

function UserForm() {
    const {mutate, isLoading} = useMutation(createUser, {
        onSuccess : (data) => {
            console.log(data) //This is the response you get back
            setResponse(data)
        }
    })
    const [response,setResponse] = useState({})
    const [userData,setUserData ] = useState({
        name : '',
        email : '',
        gender : '',
        status : ''
    })

    const handleFormChange = (e) => {
        setUserData(
            {
                ...userData,
                [e.target.name] : e.target.value
            }
        );
    }

    const handleSubmit = (e) => {
        e.preventDefault();
        mutate(userData)

    }

  return (
    <div>
        <form onSubmit={handleSubmit}>
            <div className='field-container'>
            <label htmlFor='name'>Name : </label>
            <input type="text"  name='name' onChange={handleFormChange} value={userData.name}/>
            </div>

            <div className='field-container'>
            <label htmlFor='name'>Email : </label>
            <input type="email"  name='email' onChange={handleFormChange} value={userData.email}/>
            </div>



            <div className='fieldContainer'>
            <label htmlFor='gender'>Gender : </label>
            <input type="radio"  name='gender' onChange={handleFormChange} value='female'/> Female

            <input type="radio"  name='gender' onChange={handleFormChange} value='male'/> Male

            </div>

            <div className='field-container'>
            <label htmlFor='gender'>Status : </label>
            <input type="radio"  name='status' onChange={handleFormChange} value='active'/> Active

            <input type="radio"  name='status' onChange={handleFormChange} value='inactive'/> Inactive

            </div>
            <input type='submit' value={'Submit'} />

        </form>
        {isLoading && <div>Posting the data...</div>}
        {Object.keys(response).length > 0 && (<div>
            <h4>Response</h4>
            <p>{response.name}</p>
            <p>{response.email}</p>
        </div>)}
    </div>
  )
}

export default UserForm

다음 스크린샷에서 내가 생성한 출력입니다.



일부 값을 업데이트하고(입력 요청 만들기) 해당 변경 사항을 다시 반영하기를 원할 때마다 처리해야 하는 몇 가지 추가 단계가 있습니다. 그러나 입문서로서 다음 주제로 남겨두겠습니다. 이것이 유용하기를 바랍니다.