🚀아폴로 반응 | 낙관적 반응! 🔮

Apollo Client에서 제가 가장 좋아하는 것 중 하나는 캐싱입니다. 불필요한 네트워크 호출을 방지하기 위해 이미 가져온 데이터를 저장하여 보다 반응이 빠른 React 앱을 빌드할 수 있습니다!

낙관적 반응이란?

낙관적 응답은 서버의 응답을 받기 전에 프런트엔드에 선제적으로 모든 변형에 응답하는 방법입니다. 어떻게 보면 우리는 미래를 예측하고 있습니다!!!



Apollo의 캐싱을 활용하여 백엔드가 다시 보낼 수 있다는 것을 알고 있는 캐시 기반을 다시 작성할 수 있습니다!

캐시 업데이트

useMutation 후크를 호출할 때 두 번째 인수는 여러 콜백에 액세스할 수 있는 옵션을 사용합니다. onError , onComplete , variables , update 등 네트워크 호출 상태에 따라 작업을 수행할 수 있는 위치

여기가 캐시를 조작할 수 있는 완벽한 장소입니다.

낙관적 반응

그러나 먼저 optimisticResponse 를 전달해야 합니다. 이것은 캐시에 기록하기 위해 제공할 선제적 데이터입니다.

I usually separate where I declare my variables and optimisticResponse to the mutation function. Like so.

const [post, postRes] = useMutation(CREATE_POST)

const submitHandler = (e) => {
    e.preventDefault()
    if (body.trim() !== '') {
    // Mutation Function  
    post({  
      variables: { body },
  // Here is where I like to declare what my 'Post' should look like  
        optimisticResponse: {
          createPost: {
            body,
            username: session!.username,
            createdAt: new Date().toISOString(),
            comments: [],
            likes: [],
            // You will have to assign a temporary Id. Like so
            id: 'Temp_ID',
            __typename: 'Post',
          },
        },
      })
    }
  }

NOTE: The temporary id you've assigned will be rewritten after the actual response comes back, assuming the network call is successful. So be wary of rerenders!

이제 캐시에 쓰기 위해 해당 항목optimisticResponse에 액세스할 수 있습니다.
update 콜백을 사용할 것입니다. mutate 함수를 실행하는 순간 트리거됩니다.

const [post, postRes] = useMutation(
    CREATE_POST,
    {
      // data is where we can access the optimisticResponse we passed in earlier 
      update: (cache, { data }) => {
        // Get the current cached data. 
        const existingPosts = client.readQuery({
         // The cached query key is the same as the name of the GQL schema
          query: GET_POSTS,
        })
        // Now we combine the optimisticResponse we passed in earlier and the existing data
        const newPosts = [data.createPost, ...existingPosts.getPosts]
        // Finally we overwrite the cache
        cache.writeQuery({
          query: GET_POSTS,
          data: { getPosts: newPosts },
        })
      }
    }
  )

GraphQL 조각을 사용하여 업데이트

이제 경우에 따라 단일 항목을 업데이트해야 합니다. 위의 예를 수행하면 상당히 비용이 많이 듭니다! 이를 달성하려면 GQL Fragments의 도움이 필요합니다.

GraphQL 조각이란 무엇입니까?

단순히 여러 쿼리와 변형 간에 공유할 수 있는 논리 조각입니다. GQL 스키마에서 반복되는 패턴을 추출할 수 있습니다.

In this example most of my queries and mutations has this repeating schema for a Post. It would be better to put it on a fragment like this.

import { gql } from '@apollo/client'

export const PostFragment = gql`
  fragment PostParts on Post {
    id
    body
    createdAt
    username
    likes {
      username
    }
    comments {
      id
      body
      username
      createdAt
    }
  }
`

And apply it to every query and mutation that needs this. Like so.

// Spreading it like an object
export const COMMENT_POST = gql`
  ${PostFragment}
  mutation CommentPost($postId: ID!, $body: String!) {
    createComment(postId: $postId, body: $body) {
      ...PostParts
    }
  }
`

업데이트할 항목을 개별적으로 선택할 수 있도록 조각이 필요합니다.

Fragment를 사용하여 캐시 업데이트

 const [comment, commentRes] = useMutation(COMMENT_POST, {
    update: (cache, { data }) => {
      // We will take the post we wanted to update using readFragment. 
      const post = cache.readFragment({
        // From here we pass in the Id next to whatever you named
        // your cached data. Then the name of the fragment you've created.
        id: `Post:${data?.createComment.id}`,
        fragment: PostFragment,
      })

      // Then, we update it using writeFragment.
      cache.writeFragment({
      // Same as when you read the individual item
        id: `Post:${data?.createComment.id}`,
        fragment: PostFragment,
      // Updating the contents
      // In this example I'm just spreading the existing contents, then rewriting the comments with the data we passed from the optimisticResponse.
        data: {
          ...post,
          comments: data?.createComment.comments,
        },
      })
    }
  })

이렇게 하면 캐시된 전체 데이터를 덮어쓰는 대신 원하는 항목을 터치할 수 있습니다!

이제 서버에 대한 확신이 있다면 거의 즉각적인 UX를 갖게 됩니다!

결론

비동기 데이터를 배우기 시작했을 때 로딩 애니메이션을 구현할 때 너무 놀랐습니다. 그러나 당신의 사용자가 어디에서나 볼 수 있고 UX가 느리게 느껴지도록 귀찮게 만드는 경우.

UI에 선제적으로 무언가를 제공하면 앱의 반응성에 많은 차이가 생깁니다. GraphQL용 Apollo와 RestAPI용 React Query는 모두 제 선택이 될 것입니다!