How to I pass a filters variable to useInfiniteQuery with pageParam?

[vader1359]

I'm trying to pass the queryKey variable alongside the pageParam in useInfiniteQuery? I've tried for a while but:

• Cannot get the page data
• In some cases, the data is duplicated

export const fetchInfiniteVariants = async (
  filters = {},
  { pageParam = 0 }
) => {
  console.log(pageParam)
  console.log("filets", filters)
  const records = await axios.get(baseURL, {
    headers: authHeader,
    params: {
      pageSize: 24,
      offset: pageParam,
      fields: [
        "name",
        "packshot",
        "packshot_size",
        "brand_logo",
        "price",
        "slug",
      ],
      // filterByFormula: `({validated} = 1)`,
      filterByFormula: `(${filterByFields(filters)})`,
      "sort[0][field]": "priority",
      "sort[0][direction]": "asc",
    },
  })
  return records
}

export const useInfiniteVariantsQuery = (
  initialRecords,
  offset,
  filters = { brand: "HAY" }
) => {
  const infiniteVariantsQuery = useInfiniteQuery(
    ["infiniteVariants", filters],
    () => fetchInfiniteVariants(filters),
    {
      initialData: {
        pageParams: [],
        pages: [
          {
            data: {
              records: initialRecords,
              offset: offset,
            },
          },
        ],
      },
      initialStale: true,
      staleTime: 6000,
      getNextPageParam: (lastPage, pages) => lastPage.data.offset,
    }
  )
  return {
    ...infiniteVariantsQuery,
  }
}

[TkDodo]

the pageParams are passed to the queryFn of useInfiniteQuery. By using an anonymous function like:

() => fetchInfiniteVariants(filters),

you are taking away the pageParams. What you'd need to do is:

(queryFunctionContext) => fetchInfiniteVariants(filters, queryFunctionContext),

if you use an inline function, we cannot magically "inject" a second parameter to it ...

what you can also do is not use an inline function:

useInfiniteQuery(key, fetchInfiniteVariants)

then, the function will get passed the whole queryFunctionContext, which consists of the queryKey and pageParams. And since filters is part of the queryKey, you can use that from there.