How to implement the optimistic UI in the case of fe-retching a different query in Apollo v3 React client

Question

I'm trying to implement the Optimistic UI for the like functionality but I can't handle it because of the dedicated query I must re-fetch to update the articles. Let me explain it a bit better via code examples: Here is the article document I have.

I want to mutate the liked property and I have a mutation to do it:

  mutation LikeArticle($status: Boolean!, $articleId: String!) {
    likeArticle(status: $status, articleId: $articleId)
  }

to fetch the Article document I have this query:

  query GetArticle($id: String!) {
    getArticle(id: $id) {
      id
      createdAt
      liked
      likes

      author {
        id
        username
      }

      topics {
        id
        name
      }
    }
  }

In my UI I just render the Article document based on the data getQuery provides. Also, I have the Like button and when the user presses on it the likeArticle mutation executes and I must refetch the getArticle query to update the UI. And here is the issue, I just want to add the optimistic UI to not to wait for the long server response however it doesn't work at all. Probably because of the re-fetching getArticle query but I'm not sure

  const [
    likeArticle,
    {
      data: likeArticleData,
      loading: likeArticleLoading,
      error: likeArticleError,
    },
  ] = useMutation(LIKE_ARTICLE, {
    refetchQueries: [
      {
        query: GET_ARTICLE_QUERY,
        variables: { id: article.id },
      },
    ],
    optimisticResponse: {
      getArticle: {
        id: article.id,
        __typename: "Article",
        liked: !article.liked,
      },
    },
  });

Example of executing likeArticle mutation

likeArticle({
  variables: {
    status: !article.liked,
    articleId: article.id,
  },
});

I'll appreciate any help/information

Answer 1

Using client and optimisticResponse options might help in this case. Here is the Official Docs. It's often possible to predict the most likely result of a mutation before the GraphQL server actually returns it. Apollo Client can use this likely result to update your UI optimistically, making the app feel more responsive to the user. using client is way ahead but it won't work in case of request failed and you want the reversal of the last optimistic action take manually. I would give priority to optimisticResponse over client.