In setQueryData the 'oldData' become undefined after saving any code changes

[stefanatanasovmk]

Hei,

So after facing challenges with fetching data, I decided to change my data fetching and handling and to use react-query for it. I like the documentation and most things just works, but there is very specific issue for which I didn't find answer anywhere.

My app is a chat app built with react-native and expo.

Scenario: I'm fetching the user conversations and listing them on the screen, the conversations are fetched in a context provider to be available troughout the app. In the provider, I also have an event listeners that are listening if a conversation have been updated, added or removed.

const {
      data: conversations,
      fetchNextPage: convsFetchNextPage,
      hasNextPage: convsHasNextPage,
      isFetchingNextPage: convsIsFetchingNextPage,
      isPending: convsIsPending,
      isRefetching: convsIsRefetching,
      refetch: convsRefetch,
      isError: convsIsError,
      error: convsError,
   } = useInfiniteQuery({
      queryKey: CONVERSATIONS_QUERY_KEY,
      queryFn: async ({ pageParam = 0 }) => {
         if (!user) return [];
         const data = await fetchConversations({
            startingIndex: pageParam,
            endingIndex: pageParam + conversationsLimit,
            user,
         });

         return data || [];
      },
      initialPageParam: 0,
      getNextPageParam: (lastPage, allPages) => {
         if (lastPage.length < conversationsLimit) {
            return undefined;
         }
         const currentTotalFetched = allPages.reduce(
            (acc, page) => acc + page.length,
            0,
         );
         return currentTotalFetched;
      },
      enabled: !!user,
      staleTime: 31 * 24 * 60 * 60 * 1000,
   });

And then in the event listener I call this handleConversatiOnChange function:

subscriptionChannel.current = supabase
         .channel(`conversation-changes-${user.id}`)
         .on(
            "postgres_changes",
            {
               event: "INSERT",
               schema: "public",
               table: "conversations",
            },
            handleConversationChange,
         )
         ...

And in the handleConversationOnChange function I'm trying to change the existing updated conversation with the latest one:

const updatedConversation = await fetchConv(payload.new.id);

queryClient.setQueryData(
               CONVERSATIONS_QUERY_KEY,
               (oldData: InfiniteData<SupabaseConversation[]> | undefined) => {
               oldData.find(....) 
})

The problem that I'm facing is when I change something in the code and I save the changes, the
oldData variable become undefined in subsequential runs. And I cannot figure out why.

I'm running the development build on the phones, the event listeners are running correctly after saving code changes, everything seems fine except that oldData become undefined. But if I refresh the development server, and open the development build app again on the phone, oldData is as it should be, again.

I'll appreciate if someone else have faced similar issue and how it has been solved.

[stefanatanasovmk]

UPDATE: For some reason, running npm start and turning off and on the app made the issue goes away. Now I actually just invalidate the query instead of doing the whole gymnstics of checking the cache manually. That didn't worked previously neither.

Previously I would just press r to restart the development server and turn off and on the app, but didn't do the job.

If someone has some similar issue maybe it's smart to run also npm start -- --reset-cache or yarn start -c to clear the bundler cache.