Query with Pagination + Filters
I'm implementing pagination with filters using React Query, and I've hit an interesting UX issue. Here's the scenario:
continue...
// hooks/usePatients.ts
export function usePatients({
initialData,
filters,
skip,
take,
}: {
initialData?: Awaited<TFetchResponse<Patient>>;
skip?: number;
take?: number;
filters?: PatientFilters;
}) {
return useQuery({
queryKey: ['patients', { skip }, { take }, { filters: JSON.stringify(filters) }],
queryFn: async () => {
const response = await patientFindManyAction({
skip,
take,
filters,
});
if (!response || !response.data) throw new Error('Something went wrong');
return response.data;
},
placeholderData: (previousData) => previousData ? previousData : initialData,
});
}// hooks/usePatients.ts
export function usePatients({
initialData,
filters,
skip,
take,
}: {
initialData?: Awaited<TFetchResponse<Patient>>;
skip?: number;
take?: number;
filters?: PatientFilters;
}) {
return useQuery({
queryKey: ['patients', { skip }, { take }, { filters: JSON.stringify(filters) }],
queryFn: async () => {
const response = await patientFindManyAction({
skip,
take,
filters,
});
if (!response || !response.data) throw new Error('Something went wrong');
return response.data;
},
placeholderData: (previousData) => previousData ? previousData : initialData,
});
}continue...
