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

`optimisticResponse` is for current request response simulation, update can be used to update query cache entry ... but is fired after mutation response, too .... you can use `client` to update cache just after calling mutation, in event handler — xadm, May 15 '21 at 13:02
I see, didn't know it. Thank you @xadm, I really appreciate your help — Velidan, May 15 '21 at 14:39
try `optimisticResponse: { likeArticle: {` - `likeArticle` as it is your mutation expected data structure ... if both query and mutation are refs (in cache store) to the same object, then component based/watching on query result should be updated/rerendered ... if not, use client cache update/writeQuery — xadm, May 15 '21 at 17:57
Doesn't work, unfortunately, the `likeArticle` mutation returns the boolean scalar type so Apollo can't determinate what object is relative to this particular mutation — Velidan, May 16 '21 at 09:38

score 0 · Answer 1 · answered May 15 '21 at 16:47

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.

Thanks for your answer Kiran but the optimistic UI doesn't work in my case at all so, unfortunately, the only way is just the client operations as @xadm mentioned — Velidan, May 16 '21 at 09:38

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

1 Answers1