Repository navigation
null is passed as pageParam with PersistQueryClientProvider #4309
Description
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
- Open app, load first page of the infinite query
- Reopen app to allow
PersistQueryClientProviderto 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
Activity
TkDodo commentedon Oct 12, 2022
please put that code in codesandbox or somewhere were we can run the example, thanks.
default serialization uses
JSON.stringifyso I can't imagine how anundefinedvalue can becomenullafter hydration. Can't really see anything like that in our codebase :/dodicandra commentedon Oct 19, 2022
hi, @TkDodo i also got the same problem. Please see this repo for more details. for this information occurs when the application is reloaded. to achieve it, do it like this
scroll to last page -> pull to refresh -> reload app (type
Rin terminal) -> scroll to last page -> pull to refresh.in this last step we will see an error message indicating
pageParamcontains nullmrlika commentedon Oct 19, 2022
The demo is in JS, but if add types with TypeScript it breaks the types.
pageshould benumber | undefinedand nevernullhttps://codesandbox.io/s/nifty-frost-8v1kjf?file=/src/App.js
Screen.Recording.2022-10-19.at.12.55.37-1.mov
mrlika commentedon Oct 21, 2022
Right before saving
pageParamisundefined(that is correct):But in Local Storage after saving it is
null:mrlika commentedon Oct 21, 2022
The issue is that
undefinedis not a valid JSON value:Result of
is
"{\"pageParams\":[null]}".The same result gives
TkDodo commentedon Oct 22, 2022
@mrlika you're right about that - I think something similar happens when you try prefetch an infinite query on the server and then try to send it to the client via nextJs, because nextJs also just uses
JSON.stringify.I find it kinda weird that
undefinedis serialized asnull. One thing you can do for now is to pass a differentserializefunction to the persisters:query/packages/query-async-storage-persister/src/index.ts
Lines 48 to 49 in 7741a2f
I think having a serializer that omits
undefinedvalues might do the trick.We could also have a look at how we dehydrate queries and maybe leave out the
pageParamsis they are undefined:query/packages/query-core/src/hydration.ts
Lines 60 to 66 in 357ec04
Not sure if that would break something though
TkDodo commentedon Oct 22, 2022
The problem is that
pageParamswill likely have multiple entries, so it's: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
mrlika commentedon Oct 23, 2022
@TkDodo, the issue is that this
undefinedis passed by React Query into my code. And then default serializer of React Query saves it incorrectly andnullis passed back instead ofundefinedbreaking the types.The solution is to manually make the type
PageParams | nullif persist feature is used.TkDodo commentedon Oct 28, 2022
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
nullbeing rightfully returned fromgetNextPageParam.We have a plan that disallows
nullbeing returned from there, then we can treatnulllikeundefinedand side-step that issue. We would make sure internally that you'd always getundefinedpassed into the queryFn even ifnullsneaks into thepageParams.But, it will have to wait a bit for the next major release.
TkDodo commentedon Feb 20, 2023
PR: