标签: react-query

我以这种方式在我的反应应用程序中使用反应查询

    const { data, status } = useQuery(key, queryFunc, { staleTime: 1 * 60 * 1000 });

我希望能够根据数据值使缓存中的某个键无效，基本上是当数据为空时，所以我添加了一个效果

useEffect(() => {
   if (data === null) {
     queryClient. invalidateQueries(key)
   }
}, [data])

这种方法将导致请求循环，其中无效的查询将重新获取，获取 null 作为响应，效果执行并无效等等......

我希望能够从缓存中删除密钥而不需要重新获取，所以我不会陷入这个无限请求循环，一直在深入研究反应查询文档，但没有运气。无论如何，反应查询也有类似的情况，其中密钥需要从缓存中删除而不重新获取？

我正在使用 React Query 和 typescript 来获取项目中的数据，并且我尝试使用 useQuery 挂钩返回的错误来显示描述错误的消息（如果存在），如下所示：

{isError && (error)? <p className=" text-[#ff0000] text-center font-semibold">{error?.response.data.message}</p> : null}

我遇到错误类型问题：

我该如何修复它，我在互联网上找不到任何内容，如果可能的话，任何人都可以解释如何使用反应查询处理不同的抛出错误，因为你可以在 JS/TS 中抛出任何内容

我尝试重新获取单击的每个按钮并获取新数据

const {refetch,data,isLoading} = useQuery(
    "getkurs",() =>fetch( `https://free.currconv.com/api/v7/convert? 
      q=${selected.country.currencyId}_IDR&compact=ultra&apiKey=${process.env.COUNTRY_API}`).then((res) => 
    res.json()),{ enabled: false, refetchOnWindowFocus: false }
  );

<button onclick={()=>refetch()}>click</button>

它只能工作一次，但第二次等就不起作用了，有人可以帮助我吗？

useQuery我在几个 React 组件中使用了以下定义：

useQuery("myStuff", getMyStuffQuery().queryFn);

哪里getMyStuffQuery看起来像这样：

export const getMyStuffQuery = () => {
    return {
    queryFn: () => makeSomeApiCall(),
}}

我希望虽然所有这些组件都会呈现，但makeSomeApiCall()只会进行一次 API 调用，其余时间将使用第一次调用产生的缓存。

makeSomeApiCall()然而，每当任何所述组件呈现时，它似乎都会一次又一次地调用。

为什么 React Query 不使用缓存？难道我做错了什么？

我正在使用 React-query 进行 API 调用。我想知道是否有一种方法可以以惰性方式调用查询。

意味着仅当查询参数更改时才调用查询。

这就是我目前所拥有的；我正在使用一个 hack，其中useEffectifrecipeName更改，然后运行该refetch函数。

export const searchRecipeByName = async (recipeName: string) => {
  return await api.get(
    `/recipes/complexSearch?apiKey=${process.env.NEXT_PUBLIC_SPOONACULAR_API_KEY}&query=${recipeName}&addRecipeInformation=true&fillIngredients=true`
  );
};

  const [recipeName, setRecipeName] = useState("");

  const { data, refetch } = useQuery(
    "homePageSearchQuery",
    () => searchRecipeByName(recipeName),
    { enabled: false }
  );

// HACK
  useEffect(() => {
    if (!!recipeName) {
      refetch();
    }
  }, [recipeName]);

  const handleOnSearchSubmit = async (recipeSearch: RecipeSearch) => {
    setRecipeName(recipeSearch.search);
  };

最好，我想在函数中调用查询handleOnSearchSubmit。

我可以创建一个自定义useLazyQuery钩子来处理这个问题，但我想知道 React-query 是否有本地方法来处理这个问题。

我有一个 api 调用，看起来像

const getMutationService = () => {
  return {
    createMeme: async (
      _private: string,
      templateId: string,
      file: Blob,
      memeText?: string,
      title?: string,
      tags?: Array<string>,
    ): Promise<MemeCreateMemeResponse | undefined> => {
      return await memeApi.memePost({
        _private,
        templateId,
        file,
        memeText,
        title,
        tags,
      });
    },
  };
};

我在另一个钩子中调用它，例如

const mutationService = getMutationService();



 const { mutate: createMeme } = useMutation(mutationService.createMeme);

它抛出一个错误

类型参数 '(_private: string, templateId: string, file: Blob, memeText?: string, title?: string, Tags?: Array) => Promise<MemeCreateMemeResponse | undefined>' 不可分配给“MutationKey”类型的参数。

我已经用相同的模式进行了其他突变调用。为什么这个会抛出这个突变关键错误？使困惑

我有两个涉及onVerificationCodeSubmit重置密码逻辑的 API 调用。问题是在成功回调newPasswordMutation之前执行。setRestorePasswordToken(data.restoreToken)verifyCodeMutation

我该如何等待呢？

我可以通过 React-Query 工具处理它吗？

  const { mutateAsync: verifyCodeMutation } = useMutation(verifyCode, {
    onSuccess: ({ data }) => setRestorePasswordToken(data.restoreToken),
  });

  const { mutateAsync: newPasswordMutation } = useMutation(createNewPassword, {
    enabled: restorePasswordToken,
    onSuccess: () => setPasswordResetSuccessfull(true),
  });

  const onRestorePasswordSubmit = ({ email }) => {
    restorePasswordMutation(email);
  };

  const onVerificationCodeSubmit = async ({ verificationCode, password }) => {
    await verifyCodeMutation({ verificationCode, restoreToken });
    newPasswordMutation({ password, restorePasswordToken });
  };

我有几个使用用户详细信息的组件。

由于用户详细信息不会经常更改，因此我只想获取它们一次。

一种方法是 -

const twentyFourHoursInMs = 1000 * 60 * 60 * 24
defaultOptions: {
    queries: {
      refetchOnWindowFocus: false,
      refetchOnmount: false,
      refetchOnReconnect: false,
      retry: false,
      staleTime: twentyFourHoursInMs,
    },
  },
})

另一种方法是在基本组件中获取数据一次，并使用其他组件中的缓存数据queryClient.getQueryData('user')

哪种方式会更好？

我正在使用 react-query 进行 API 调用，在这个问题案例中，我只想在满足某些条件时调用 API。

我有一个输入框，用户可以在其中输入搜索查询。当输入值更改时，将使用输入的内容作为搜索查询调用搜索服务器……但前提是输入值的长度超过 3 个字符。

在我的反应组件中，我正在调用：

const {data, isLoading} = useQuery(['search', searchString], getSearchResults);

我的getSearchResults函数将有条件地进行 API 调用。

const getSearchResults = async (_, searchString) => {
    if (searchString.length < 3)
        return {data: []}

    const {data}  = await axios.get(`/search?q=${searchString}`)
    return data;
}

我们不能在条件中使用钩子 - 所以我将条件放入我的 API 调用函数中。

这几乎有效。如果我输入一个简短的查询字符串，则不会发出 API 请求，并且会返回一个空数组data。好极了！

但是 -isLoading会true短暂地翻转- 即使没有发出 HTTP 请求。所以我的加载指示器会在没有实际网络活动时显示。

我是否误解了如何最好地解决我的用例，有没有办法确保isLoading在没有 HTTP 活动的情况下返回 false？

我想实现长轮询，直到从 API 获取某些数据。

例如，假设我们有一个返回进程进度的 API。我想调用该 API，直到该过程完成。

是否可行？如果可行，我该如何实施？