React Query中第二个API请求未执行问题求助

问题根因 #

你写的两个自定义Hook用了一模一样的Query Key：createUseAddressKey(address)。React Query是靠Query Key来区分不同查询的，当两个查询的Key完全相同时，它会直接复用第一个查询的缓存结果，不会再发起第二个请求，这就是usePortfolioData没触发api/portfolios调用的核心原因。

修复方法 #

给usePortfolioData的Query Key加个独特标识，让React Query认出这是另一个独立查询即可，两种方式任选：

方式一：修改Query Key生成函数 #

如果createUseAddressKey允许修改，给它添加类型参数来区分不同查询：

// 先更新createUseAddressKey函数
const createUseAddressKey = (address: string, queryType?: string) => {
  return queryType ? ['address-query', address, queryType] : ['address-query', address];
};

// 修改usePortfolioData的Query Key
export const usePortfolioData = (
  address: string,
  options?: UseQueryOptions<IQuery, AxiosError>
) =>
  useQuery(
    createUseAddressKey(address, 'portfolio'), // 传入独特标识"portfolio"
    () =>
      fetcherAddressArkhamTransfers(`api/portfolios`, address).then(
        ({ data }) => data
      ),
    {
      ...options,
      retry: false,
      cacheTime: MINUTES_TO_REFETCH_DATA,
      staleTime: MINUTES_TO_REFETCH_DATA,
    }
  );

// 建议给useAccountData也加上对应标识，保持规范
export const useAccountData = (
  address: string,
  options?: UseQueryOptions<IQuery, AxiosError>
) =>
  useQuery(
    createUseAddressKey(address, 'transfer'), // 传入标识"transfer"
    () =>
      fetcherAddressArkhamTransfers(`api/transfers`, address).then(
        ({ data }) => data
      ),
    {
      ...options,
      retry: false,
      cacheTime: MINUTES_TO_REFETCH_DATA,
      staleTime: MINUTES_TO_REFETCH_DATA,
    }
  );

方式二：直接扩展原Query Key #

不想修改createUseAddressKey的话，直接在原Key基础上扩展添加标识：

export const usePortfolioData = (
  address: string,
  options?: UseQueryOptions<IQuery, AxiosError>
) =>
  useQuery(
    [...createUseAddressKey(address), 'portfolio'], // 扩展原Key数组，添加独特标识
    () =>
      fetcherAddressArkhamTransfers(`api/portfolios`, address).then(
        ({ data }) => data
      ),
    {
      ...options,
      retry: false,
      cacheTime: MINUTES_TO_REFETCH_DATA,
      staleTime: MINUTES_TO_REFETCH_DATA,
    }
  );

验证效果 #

修改完成后，两个Hook的Query Key会变成不同的：

• useAccountData的Key：[原Key结构, 'transfer']
• usePortfolioData的Key：[原Key结构, 'portfolio']

此时React Query会将它们视为两个独立的查询，分别发起api/transfers和api/portfolios请求。

内容的提问来源于stack exchange，提问作者Kiran S youtube channel