如何在React Query的useInfiniteQuery中传递自定义参数search_query？

核心问题分析 #

问题根源在于没有在useInfiniteQuery的查询流程中正确绑定search_query参数：要么是自定义Hook未将参数纳入查询依赖，要么是queryFn没有正确获取参数，导致调用分页方法时参数无法传递到API请求里。

解决方案步骤 #

1. 重构自定义Hook，绑定search_query到查询依赖

useInfiniteQuery通过queryKey管理缓存和查询触发逻辑，必须将search_query加入queryKey，同时在queryFn中确保参数能传递到API函数：

import { useInfiniteQuery } from '@tanstack/react-query';

// 假设你的API请求函数
const getCustomerApi = async ({ pageParam = 1, search_query }) => {
  const response = await fetch(`/api/customers?page=${pageParam}&search=${search_query}`);
  if (!response.ok) throw new Error('请求失败');
  return response.json();
};

// 自定义Hook：接收search_query作为外部参数
export const useGetCustomers = (search_query) => {
  return useInfiniteQuery({
    // 将search_query纳入queryKey，确保参数变化时自动重置分页并重新查询
    queryKey: ['customers', search_query],
    queryFn: ({ pageParam }) => {
      // 直接将search_query传入API函数
      return getCustomerApi({ pageParam, search_query });
    },
    // 根据API返回的分页数据，定义下一页参数的获取逻辑（按需调整）
    getNextPageParam: (lastPage) => {
      return lastPage.hasNextPage ? lastPage.nextPage : undefined;
    },
    initialPageParam: 1,
  });
};

2. 组件中正确使用Hook并触发分页

无需用useEffect手动调用分页方法，直接使用useInfiniteQuery返回的fetchNextPage即可，参数会通过queryKey自动关联：

import { useState } from 'react';
import { useGetCustomers } from './useGetCustomers';

const CustomerList = () => {
  const [searchQuery, setSearchQuery] = useState('Josh');
  const { data, fetchNextPage, hasNextPage, isFetchingNextPage } = useGetCustomers(searchQuery);

  // 触发下一页查询：无需手动传search_query，Hook已通过queryKey关联参数
  const handleLoadMore = () => {
    if (hasNextPage && !isFetchingNextPage) {
      fetchNextPage();
    }
  };

  return (
    <div>
      <input
        type="text"
        value={searchQuery}
        onChange={(e) => setSearchQuery(e.target.value)}
        placeholder="搜索客户"
      />
      <div>
        {data?.pages.map((page, index) => (
          <div key={index}>
            {page.customers.map((customer) => (
              <div key={customer.id}>{customer.name}</div>
            ))}
          </div>
        ))}
      </div>
      {hasNextPage && (
        <button onClick={handleLoadMore} disabled={isFetchingNextPage}>
          {isFetchingNextPage ? '加载中...' : '加载更多'}
        </button>
      )}
    </div>
  );
};

3. 特殊场景：临时传递参数给fetchNextPage（不推荐）

如果确实需要临时覆盖参数（尽量通过queryKey管理参数），可以通过fetchNextPage的options传递，再在queryFn中获取：

// 自定义Hook中修改queryFn，支持从meta取临时参数
queryFn: ({ pageParam, queryKey, meta }) => {
  // 优先取meta中的临时参数，否则用queryKey中的默认参数
  const targetSearch = meta?.search_query || queryKey[1];
  return getCustomerApi({ pageParam, search_query: targetSearch });
};

// 组件中调用时传递临时参数
fetchNextPage({
  meta: { search_query: 'Josh' }
});

关键注意事项 #

• queryKey必须包含所有影响查询的参数：search_query变化时，queryKey更新，useInfiniteQuery会自动重置分页并重新查询，符合搜索场景的预期。
• 避免用useEffect手动触发API：useInfiniteQuery内置了完整的查询生命周期管理，手动调用会破坏缓存和状态逻辑。
• API参数必须从queryFn的上下文获取：确保pageParam和search_query能正确传递到API请求中。

内容的提问来源于stack exchange，提问作者LayTexas