This is my react query api scroll with infinite scroll
export function useGetEmployeesInfiniteScroll() {
return useInfiniteQuery(
[QUERY_KEYS.employees],
async ({ pageParam = 0 }) => {
const { data } = await axiosInstance.get(v1 + employees + filter, {
params: {
jobStatus: ['NEW', 'IN'],
page: pageParam,
size: 20,
},
});
return data;
},
{
getNextPageParam: (lastPage) => {
const nextPage = lastPage.number + 1;
return nextPage < lastPage.totalPages ? nextPage : undefined;
},
},
);
}
The problem is an array of params. If I send these parameters, the API link is
https://api/filter?jobStatus[]=NEW&jobStatus[]=IN&page=0&size=20
The API must be like this
https://api/filter?jobStatus=NEW&jobStatus=IN&page=0&size=20
How can I fix it?
You need to use the paramsSerializer
option of axios.
qs
package is quite helpful here
await axiosInstance.get('<url>', {
params: {
...
},
paramsSerializer: params => {
return qs.stringify(params , { indices: false })
}
})
You can also try arrayFormat
parameter while serializing with qs
qs.stringify(params, { arrayFormat: 'repeat' })