null is passed as pageParam with PersistQueryClientProvider

Describe the bug

Our code uses react-native, useInfiniteQuery with PersistQueryClientProvider:

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      staleTime: 5 * 60 * 1000, // 5 min
      cacheTime: 1000 * 60 * 60 * 24, // 24 hours
    },
  },
});

export function CustomQueryClientProvider({ children }: { children: ReactNode }) {
  return (
    <PersistQueryClientProvider
      client={queryClient}
      persistOptions={{ persister: asyncStoragePersister }}
      onSuccess={() => {
        // resume mutations after initial restore from the storage was successful
        queryClient.resumePausedMutations();
      }}
    >
      {children}
    </PersistQueryClientProvider>
  );
}

type MovesQueryKeyType = [string, GetMovesFilter | undefined];
type MovesQueryOptions = UseInfiniteQueryOptions<MovesData, unknown, MovesData, MovesData, MovesQueryKeyType>;
type MovesQueryFunctionContext = QueryFunctionContext<MovesQueryKeyType, number>;

export const useMovesQuery = (filter?: GetMovesFilter, options?: MovesQueryOptions) =>
  useInfiniteQuery(
    [MOVE_QUERY_KEY, filter],
    ({ signal, pageParam }: MovesQueryFunctionContext) => getMoves(filter, pageParam, signal),
    {
      ...options,
      getNextPageParam: (_, pages) => pages.length + 1,
    }
  );
  
const { isLoading, data: movesData } = useMovesQuery(undefined, {
    staleTime: 0,
  });

According to the type system pageParam passed to getMoves is a number | undefined. But when I re-run my app null is passed as pageParam

Your minimal, reproducible example

in description

Steps to reproduce

1. Open app, load first page of the infinite query
2. Reopen app to allow PersistQueryClientProvider to restore persisted cache

Expected behavior

null should not be passed as pageParam according to the types

How often does this bug happen?

Every time

Screenshots or Videos

No response

Platform

Expo Go on Android

react-query version

4.10.1

TypeScript version

latest

Additional context

No response

[TkDodo]

We’ve discussed this and there doesn’t seem to be a good way that wouldn’t break some edge cases where people rely on null being rightfully returned from getNextPageParam.

We have a plan that disallows null being returned from there, then we can treat null like undefined and side-step that issue. We would make sure internally that you’d always get undefined passed into the queryFn even if null sneaks into the pageParams.

But, it will have to wait a bit for the next major release.

[TkDodo]

The problem is that pageParams will likely have multiple entries, so it’s:

pageParams: [undefined, 5, 10, 15]

there is no real way to serialize this to json and keep the information that there was an entry.

superjson supports serializing undefined, so you might just want to use this as a drop-in replacement for JSON.stringify / JSON.parse