Is Apollo Client in NextJS failing to refresh data post mutation?

Question

Is Apollo Client in NextJS failing to refresh data post mutation?

On this page, you can create a new User

const [createType, { loading, data }] = useMutation(CREATE_USER_CLASS) //mutation query

const createUserClass = async (event) => {
    event.preventDefault();
    try {
      const { data } = await createType({
        variables: {
          userClassName,
        },
        refetchQueries: [{ query: STACKINFO }],
        options: {
          awaitRefetchQueries: true,
        },
      });
      setNotification({
        message: 'User class created successfully',
        code: 200,
      });

      handleClose();
    } catch (e) {
      setNotification({ message: e.message, code: 400 });
      handleClose();
    }
  };

I've noticed that the API is being called twice in the network tab, which isn't ideal. Although I can see the new data added, the page doesn't seem to refresh. Any suggestions on how to fix this issue would be much appreciated.

javascript next.js apollo-client

Answer 1

Answer №1

When faced with a similar issue, I stumbled upon your question. Depending on the version of Apollo Client you are using, instead of relying on the refetchQueries() method, consider utilizing update() to clear the cache and inform the UI of any changes. Here's an example:

createType({
    variables: {
      userClassName,
    },
    update(cache) {
       cache.modify({
          fields: {
           // Field you want to udpate
          },
       });
     },
  })

For further information, refer to the official documentation page: https://www.apollographql.com/docs/react/data/mutations/#:~:text=12-,update

Hope this solution proves helpful!

Answer 2

When faced with a similar issue, I stumbled upon your question. Depending on the version of Apollo Client you are using, instead of relying on the refetchQueries() method, consider utilizing update() to clear the cache and inform the UI of any changes. Here's an example:

createType({
    variables: {
      userClassName,
    },
    update(cache) {
       cache.modify({
          fields: {
           // Field you want to udpate
          },
       });
     },
  })

For further information, refer to the official documentation page: https://www.apollographql.com/docs/react/data/mutations/#:~:text=12-,update

Hope this solution proves helpful!

Is Apollo Client in NextJS failing to refresh data post mutation?

Answer №1

Similar questions

Utilizing ng-href in Angular.js Template: A Guide

Interoperability between AngularDart and AngularJS

Outputting PHP variables in JavaScript is a common practice used to pass

Customize the text displayed in a dropdown menu in Angular Material based on the selection made

Loop through each instance of a data record in a JSON document using Vue's v-for directive

Creating interactive button groups with responsive design in a Material UI and ReactJS web application

The Chevron icon is not pointing downwards even though it has already gone upwards

Filtering Sails.js query model based on a collection attribute

JavaScript: Specialized gravity diagram

Is there a way to click on a button and have its background color change randomly each time?

failure to properly assign a property during model update in mongoose

Tips for optimizing the "framerate" (setInterval delay) in a JavaScript animation loop

Vue JS encountering Slack API CORS issue while using axios

Attempting to access an avatar image via an API, only to encounter an error message indicating that the avatar is not defined

Error: The value being evaluated in document.getElementById(x).style is not an object and is not supported

Can anyone tell me what I might be doing incorrectly when comparing these two timestamps?

What could be the reason for the sudden failure of my jQuery + AJAX functionality?

leveraging jQuery mobile for asynchronous requests

Custom Component in React Bootstrap with Overflowing Column

Showing a collection of objects in a React component