Axios ,graphQL 요청의 차이점

axios와 useQuery, useMutation(graphql) 의 차이점

GraphQL 코드

import { useMutation, gql } from '@apollo/client'

const CREATE_PRODUCT = gql`
    mutation {
        createProduct(seller:"123", createProductInput: 
            {name:"마우스", detail:"별로임", price:50000}) {
            _id
            number
            message
        }
    }
` 

export default function GraphqlMutationPage() {

    const [createProduct] = useMutation(CREATE_PRODUCT)
    
    const onClickSubmit = async () => {
        const result = await createProduct()
        console.log(result)
    }

    return ( 
        <div>
            <button onClick={onClickSubmit}>Graphql-API 요청하기</button>
        </div>
    )
}

위와 같은 GraphQL 코드가 있습니다. 해당 코드는 'Graphql-API 요청' 이라는 버튼을 누르면 createProduct함수를 mutation으로 요청하여 _id, number, message를 result 변수에 담아서 출력해주는 함수 입니다.

요청 순서를 보면 useMutation요청이 먼저 날라가서 undefined로 먼저 ‘나의 함수’ 에 들어온 후 렌더링이 된 후 data를 받아오면 undefined를 data로 교체를 하게 되면서 진행하게 됩니다.

즉 useMutation요청이 먼저 날라가게 된다는 뜻입니다.

REST-API 코드

import axios from 'axios'
import {useState, useEffect} from 'react'

export default function RestGetPage() {
    const [dog, setDog] = useState()
    useEffect(() => {
        const fetchdog = async () => {
            const result = await axios.get("https://dog.ceo/api/breeds/image/random")
            setDog(result.data?.message)
        }
        fetchdog()
    }, [])
    return (
        <div>
            <img src={dog} width={500} height={500}/>
        </div>
    )
}

useEffect를 이용한 rest-api는 전체를 다 그리고 난 후 useEffect가 실행이 되어서 아래의 axios요청이 날라가게 됩니다

즉 둘의 차이점은 graphql이 먼저 요청이 날라가고 axios는 한발짝 늦게 요청이 날라가는 차이점이 됩니다.

GraphQL 처럼 브라우저가 실행되자마자 요청을 날리려면, useEffect를 사용하지 않고 그냥 적으면 되지 않을까요?

=> 가능은 하지만, 그러할 경우 렌더링이 된 후 axios.get으로 data가 받아진 후 state에 담기게 되어버려, state에 변화가 생겨 다시 리렌더링을 하게 됩니다. 즉 불필요한 렌더링이 한 번 더 일어나게 됩니다

그래서 graphql의 ApolloClient처럼 빠르게 요청 날리는 rest-api가 만들어 진것이 ReactQuery입니다.