query is calling again on subscription

[vineet-agrawal96]

Hi,

I'm using usequery to to fetch data. As well I'm using subscriberToMore to update cache on subscription but when I update cache then query is calling again. I'm unable to understand why it's happening. Please help me to fix on that issue.

const { data: fileData, loading, error, refetch, subscribeToMore } = useQuery(
    QUERY_FILES,
    {
      variables: {
        offset: filesFilter.offset,
        limit: filesFilter.limit,
        sortkey: filesFilter.sortkey,
        sortValue: filesFilter.sortValue,
        search,
        uploaded: filesFilter.uploaded,
        complete: filesFilter.complete,
      },
      fetchPolicy: 'cache-and-network',
      notifyOnNetworkStatusChange: false,
    }
  );
  subscribeToMore({
    document: SUBSCRIPTION_FILE_NOTIFICATION,
    variables: { orgId: orgId },
    updateQuery: (prev, { subscriptionData }) => {
      if (!prev) return;
      if (!subscriptionData.data) return prev;
      const {
        fileNotification: { file, message },
      } = subscriptionData.data;

      const newData = { ...prev };
      // file updated
      if (message && !file) {
        const { status, timestamp, taskType, orgId, fileId } = message;
        const index = prev.file.data.findIndex(
          (item) => item.id === parseInt(fileId) && item.orgId === orgId
        );
        if (index !== -1) {
          const getUpdatedData = cloneDeep(prev.file.data[index]);
          const newFile = {
            ...getUpdatedData,
            status: status !== 'COMPLETE' ? `${taskType}-${status}` : status,
            updatedAt: dateFormatUpdatedAt(timestamp * 1000),
          };
          let prevData = cloneDeep(prev)
          prevData.file.data[index] = newFile
          return {
            ...prev,
            file: {
              ...prev.file,
              data: prevData.file.data,
            },
          };
        }
      }
    },
  });

[zrcni]

This onNewData function is called every time the query's data is updated:
https://github.com/apollographql/apollo-client/blob/v3.3.15/src/react/hooks/utils/useBaseQuery.ts#L30-L44

It forces the hook to update.

The query is executed every time the hook is forced to update – the value of tick changes:
https://github.com/apollographql/apollo-client/blob/v3.3.15/src/react/hooks/utils/useBaseQuery.ts#L54-L67

I ran into the same issue recently and was able to fix it by changing the query's fetchPolicy to cache-first to avoid a query over the network whenever the query's data was updated. refetch always queries over the network no matter what fetchPolicy is set. So, with cache-first fetchPolicy the query is only fetched over the network on the first try and on refetch.

I don't know if changing the fetchPolicy is a valid option in your case, but hopefully this helps.