Search code examples
reactjsgraphqlapolloapollo-cache-inmemory

Call a fetch API which is stored once in using apollo cache?


I have been working on Apollo GQL. I'm using apollo cache to reduce unwanted API calls. The probelm now I'm facing is when i have updated a data i should not re-fetch the data because the API is already called once and stored in cache.

  • Thing i wanted to do is either clear cache for a particular query or refetch the datas from server.!!
  • I can't clear the entire cache, cause i'm calling a lot of APIs

i have to re-fetch the data after the following mutation call.

const [
reopenInvoice,
{ loading: reopenLoading, data: reopenData, error: reopenError },
] = useMutation<IReopenData, IReopenVariables>(INVOICE_CLONE, {
onCompleted: ({ invoiceClone: { errors, status } }) => {
  if (!errors || !errors.length) {
    message.success("Invoice Reopened");
  } else {
    message.error(errors.join(" "));
  }
},
});

Solution

  • "refetchQueries" is the simplest way of updating the cache.

    https://www.apollographql.com/docs/angular/features/cache-updates/#refetchqueries

     const [reopenInvoice, { loading: reopenLoading, data: reopenData, error: reopenError }] = useMutation<IReopenData, IReopenVariables>(
            INVOICE_CLONE,
            {
                onCompleted: ({ invoiceClone: { errors, status } }) => {
                    if (!errors || !errors.length) {
                        message.success("Invoice Reopened");
                    } else {
                        message.error(errors.join(" "));
                    }
                },
                refetchQueries: [
                    {
                        query: TO_REFETCH_QUERY,
                        variables: {
                            id: objectID,
                        },
                    },
                ],
            }
        );