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

Is there a way to rotate label text on a radar chart using chart js?

Utilize the datepicker function in jQuery version 1.6.3 to select a range of dates

Is there a way to efficiently return an array of object and nested object keys with their full paths through recursion

Prevent unauthorized users from accessing the expressjs application

Vue 2 draggable does not maintain reactivity when the v-model value consists of a parent tag's iterable

Can I assign a custom form id before manually triggering submission using AJAX?

Is it possible to trigger the @click event in Vuejs when utilizing v-html to render HTML content?

What causes the error message 'avoid pushing route with duplicate key' when using NavigationStateUtils in React Native?

Utilizing the jexcel plugin to seamlessly integrate arrays for a personalized subtitle editing experience

Tests are not visible to jasmine-node

Using Javascript and Regular Expressions to separate and preserve the delimiter

Combining actions in a chain within an NgRx effect for Angular

Fetching response headers object in redux using React.js

What is the definition of the term "WebapiError"?

org.openqa.selenium.WebDriverException: unexpected issue: Chrome failed to initiate: crashed.(chrome inaccessible)

PHP Pagination Made Easy

Is there a way to automatically close a created div by clicking anywhere outside of it?

Debugging the Force-Directed D3 Graph

Can you identify the target of the term "this" in the upcoming JavaScript code?

Attempting to add an element to an array results in an endless cycle