reactjs - 迁移到 React 查询 3

Question

我正在尝试键入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)
  );
};

Answer 1

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

推荐的方法是内联函数：

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

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