reactjs - 如何将过滤器变量传递给带有 pageParam 的 useInfiniteQuery？

Question

我试图在 useInfiniteQuery 中将 queryKey 变量与 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 page 中所述:

Receives a QueryFunctionContext object with the following variables:

• queryKey: EnsuredQueryKey: the queryKey, guaranteed to be an Array
• 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,
  }
}