迁移到 React 查询 3答案

【问题标题】：Migrating to React Query 3迁移到 React 查询 3
【发布时间】：2020-12-30 12:48:52
【问题描述】：

我正在尝试键入getMenu(key) 函数的参数，它最初是一个字符串，但在迁移到 3.0 后，它迫使我将键设为 QueryFunctionContext<any, any> 类型，但我需要像以前一样的字符串.有什么想法吗？谢谢！

export const getMenu = async (key: string): Promise<IMenuItemData> => {
  try {
    const payload = await axios.get(key);
    return payload.data;
  } catch (reason) {
    throw parseError(reason);
  }
};

export const useMenu = (slug: string): UseQueryResult<IMenuPayload, IServerErrorObject> => {
  return useQuery<IMenuPayload, TError, IMenuPayload>(
    `menu/${slug}`,
----------> (key: string): Promise<IMenuPayload> => getMenu(key)
  );
};

【问题讨论】：

标签： reactjs react-typescript react-query

【解决方案1】：

在 v3 中，查询键不再直接传播到您的查询函数中。现在，传递了 QueryContext，但由于 queryKeys 的动态特性，这在 TypeScript 中效果不佳。

推荐的方法是内联函数：

export const useMenu = (slug: string): UseQueryResult<IMenuPayload, IServerErrorObject> => {
  const key = `menu/${slug}`
  return useQuery<IMenuPayload, TError, IMenuPayload>(
    key,
    () => getMenu(key)
  );
};

这个想法是，在你创建useQuery 的函数中，你必须知道queryKey 是什么，所以你可以直接关闭它。此外，您无需额外键入该函数 - 它会为您很好地推断出来。

【讨论】：