Tanstack react query useInfiniteQuery data is not updated client data, the server returns the updated data

Question

I have a problem using react query with my trpc api. I am using an infiniteQuery, the staletime is 0, when I come on the screen the query is fetching and the server returns the updated data but in client side the data still contains old data I don't understand why since the staletime is 0 it should update the cache with the new data:

this is the query I sent:

export const useMyNotifications = () =>
  api.user.getNotifications.useInfiniteQuery(
    {
      limit: 20,
    },
    {
      getNextPageParam: lastPage => lastPage.nextCursor,
    },
  );

This is my procedure:

getNotifications: protectedProcedure
    .input(
      z.object({
        cursor: z.string().nullish(),
        limit: z.number().min(1).max(20).default(20),
      }),
    )
    .query(async ({ ctx, input }) => {
      const { cursor, limit } = input;
      const notifications = await ctx.db.notification.findMany({
        take: limit + 1,
        where: {
          userId: ctx.user?.uid as string,
        },
        orderBy: [{ createdAt: 'desc' }, { id: 'desc' }],
        cursor: cursor ? { id: cursor } : undefined,
        include: {....}
     })
   })
 )

The react query config:

const [queryClient] = useState(
    () =>
      new QueryClient({
        defaultOptions: {
          queries: {
            cacheTime: 1000 * 60 * 60 * 24, // 24 hours
          },
        },
      }),
  );

const [trpcClient] = useState(() =>
    api.createClient({
      transformer: superjson,
      links: [
        httpLink({
          url: `${process.env.EXPO_PUBLIC_API_URL}/api/trpc`,
          async headers() {
            return {
              authorization: await getToken(),
            };
          },
        }),
      ],
    }),
  );

  const [asyncStoragePersister] = useState(() =>
    createAsyncStoragePersister({
      storage: AsyncStorage,
      retry: removeOldestQuery,
    }),
  );

return (
    <api.Provider client={trpcClient} queryClient={queryClient}>
      <PersistQueryClientProvider
        client={queryClient}
        persistOptions={{ persister: asyncStoragePersister }}>
        {children}
      </PersistQueryClientProvider>
    </api.Provider>
  );

Am I missing something ?

Thanks a lot in advance for your help.

Answer 1

Thanks again @TkDodo. When Added these options it works :

export const useMyNotifications = () =>
  api.user.getNotifications.useInfiniteQuery(
    {},
    {
      getNextPageParam: lastPage => lastPage?.nextCursor,
      keepPreviousData: true,
      staleTime: 0,
      refetchOnMount: 'always',
      refetchOnWindowFocus: 'always',
      notifyOnChangeProps: ['data'],
    },
  );

I am trying to figure out why exactly.