Update the apollo cache without calling the graphql server (apollo v3.3)

Question

I'm building a react app, I have a datasheet and update directly on the data stream I want when I send data to graphql server for update and get true result then I will update apollo cache with cache.writeQuery

• The problem is that when the following code is executed, there is also a request to the graphql server to get the data from the whole table and update the cache, I don't want to request to the graphql server to work. There, I want to update from the browser. So where did I go wrong?

here is my code

updateInventoryCache: async (_, { inventory, productId, variables }, { cache }) => {
      let variablesData;
      if (variables) {
        variablesData = JSON.parse(variables);
      }
      const { getListProduct } = cache.readQuery({
        query: GET_PAGING_PRODUCT,
        variables: variablesData.variables
      });
      cache.writeQuery({
        query: GET_PAGING_PRODUCT,
        variables: variablesData.variables,
        data: {
          getListProduct: {
            ...getListProduct,
            products: getListProduct.products.map((product) => {
              if (product.id === productId) {
                return {
                  ...product,
                  inventory
                };
              }
              return product;
            })
          }
        }
      });
      return true;
    }

"@apollo/client": "^3.3.7"

update 1:

I will initially call the graphql server to get the data and store it in apollo's (cache-and-network) cache. Then I want to update that data in the cache without having to call the apollo server to refetchQueries As in the post, I used the client.writeQuery function to update the cache but instead of updating at the client, apollo called the graphql server to get new data and update the cache while I was not using refetchQueries.

update 2: I checked, my cache has been updated but my UI doesn't re-render

Answer 1

Use fetchPolicy="cache-only" to use only the cache https://www.apollographql.com/docs/react/data/queries/#setting-a-fetch-policy

Answer 2

I believe what you're looking for is nextFetchPolicy="cache-first": https://www.apollographql.com/docs/react/data/queries/#usequery-api

nextFetchPolicy

FetchPolicy to begin enforcing after the current request. Useful for switching back to cache-first after cache-and-network or network-only.

After your call to cache.writeQuery your datasheet query will then check the cache-first to see if all of it's required data is there. If you get a cache hit, it will return data immediately without loading.

Keep in mind with AC3, sometimes multiple queries can share the same cache object but request different fields. If either cache.writeQuery or your typePolicies merge causes an active query field to be missing from the cache, it will result in a cache miss for that query. I.e. An active query that once had valid data, will suddenly return undefined. More on that issue here.