在 React-Query 中订阅手动缓存？

Question

开始尝试使用react-query，并在想我是否可以用它来替代redux？我发现react-query在nextJS中更容易使用（特别是如果我想在服务器上设置状态），所以希望有一个不需要函数的useQuery，即与redux类似的工作方式useSelect。

这样的事情可能吗（这不起作用，但说明了我想要实现的目标）？即使用react-query作为缓存数据，并且能够订阅该缓存数据。

function InputHeaderContainer() {
  return (
    <div>
      <InputHeader />
      <InputBar />
    </div>
  );
}

function InputBar() {
  const queryClient = useQueryClient();
  const inputValue = queryClient.getQueryData('INPUT_VALUE');

  const onSearchChange = (event) => {
    queryClient.setQueryData('INPUT_VALUE', event.target.value);
  };

  return <input onChange={onSearchChange} value={inputValue || ''} />;
}

function InputHeader() {
  const queryClient = useQueryClient();
  // getQueryData doesnt subscribe to the state and useQuery req a function :(
  const inputValue = queryClient.getQueryData('INPUT_VALUE');

  return (
    <div>
      <h2>{inputValue}</h2>
    </div>
  );
}

Answer 1

所以希望有一个不需要函数的useQuery，即与redux的useSelect类似的工作方式。

你确实需要提供实际的queryFn，但这并不意味着你不能实现类似redux的状态管理：

const useTodos = (select) => useTodos(['todos'], fetchTodos, { select })

感谢select，你可以创建细粒度的订阅，比如：

const todoCount = useTodos(todos => todos.length)
const firstTodo = useTodos(todos => todos[0])

等等。当然，您可以在自定义挂钩中进一步抽象，例如 useTodoCount()。

组件只会订阅 select 函数的结果，因此如果您只使用 todo 计数，则如果一个 todo 发生变化，组件将不会重新渲染，因为数组的长度保持不变。 （侧面节点：这假设设置了react-query v4或notfiyOnChangeProps: 'tracked'。否则，您仍然会看到重新渲染，因为isFetching转换） 。

另请注意，每个订阅都会触发后台重新获取。如果您计划多次使用自定义挂钩，这可能过于激进。这可以通过在查询中设置 staleTime 来最好地自定义。这个时间告诉react-query 资源被认为是新鲜的时间。只要数据是新鲜的，数据就会仅从缓存中出来（无后台更新）。要仅获取一次，请设置 staleTime: Infinityy。