如何将过滤器变量传递给 useInfiniteQuery 和 pageParam？

Question

我正在尝试将 queryKey 变量与 useInfiniteQuery 中的 pageParam 一起传递？我已经尝试了一段时间但是：

• 无法获取页面数据
• 在某些情况下，数据会被重复呈现。

我应该如何传递变量？

export const fetchInfiniteVariants = async (
  filters = {},
  { pageParam = 0 }
) => {
  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),
    {
      initialStale: true,
      staleTime: 6000,
      getNextPageParam: (lastPage, pages) => lastPage.data.offset,
    }
  )
  return {
    ...infiniteVariantsQuery,
  }
}

Answer 1

您传递给 useInfiniteQuery的 queryFn将请求上下文作为该回调的参数，如文档中所述useInfiniteQuery 页面上所述：

收到一个QueryFunctionContext具有以下变量的对象：

• queryKey: EnsuredQueryKey：queryKey，保证是一个数组
• pageParam: unknown | undefined

您可以从中解构并检索您的 queryKey，如下所示：

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