javascript - 如何在每次输入更改时获取现有缓存数据？

Question

我的应用程序有一个用户输入一个id作为请求发送以及匹配的响应数据 id 已呈现。

如果数据已存在于缓存中，我希望应用程序从每个输入的缓存中获取更改。

如果缓存中不存在数据，则应用程序只能通过让用户单击来发送请求提交按钮。

一旦用户输入输入，我将访问缓存并检查当前输入id是否存在于每个输入上改变。如果是这样，请在提交按钮禁用时渲染数据。否则启用提交按钮，以便用户可以发送请求。

根据研究，React Query's queryClient.getQueryCache是我相信我需要的。我将通过在 queryCache 上使用 .includes 来检查输入 id 是否存在于 cache 中。之后我该怎么办？这是实现该功能的正确方向吗？

这是我当前的设置。请让我知道如何继续实现所请求的功能。 https://codesandbox.io/s/rick-and-morty-2gy8r?file=/src/App.js

const handleRickAndMortyFetch = () => {
  return delay()
    .then(() => axios(`https://rickandmortyapi.com/api/character/${idQuery}`))
    .then((res) => res.data);
  };

const cacheData = queryClient.getQueryData(["rickandmorty", idQuery], {
    exact: false
})

const onInputChange = event => {
    setIdQuery(event.target.value, () => {
        cacheData.includes(idQuery)
            handleRickAndMortyFetch()
    })
}

const disable = isLoading || parseFloat(formId) === idQuery || !idQuery || cacheData?.id === idQuery;

<form onSubmit={handleSubmit(onSubmit)}>
  <input
    type="number"
    name="rickAndMortyId"
    placeholder="Between 1 and 671"
    ref={register}
    disabled={isLoading}
    onChange={onInputChange}
  />
  <button type="submit" disabled={disable}>
    Search Character
  </button>
</form>

Answer 1

我认为你想要的是queryClient.getQueryData(["rickandmorty", idQuery])。这将为您提供特定 queryKey 的缓存数据。如果该值未定义，则说明您的缓存中没有该键的数据，因此您可以启用提交按钮。

但是你需要让react-query为你管理数据。这意味着您的 handleRickAndMortyFetch 函数应该返回一个 Promise - 无需使用本地状态 (rickAndMortyCharacter) - 这只是 从react-query返回的data属性