如何使用TRPC React Query Client中止查询？

TRPC React客户端基于React Query封装，可通过两种方式实现查询中止，无需直接操作底层fetch：

方法一：复用React Query的cancelQueries机制 #

直接使用React Query的取消逻辑，通过queryKey定位并取消目标查询：

import { useQueryClient, trpc } from '@trpc/react-query';

export function TodoList() {
  const queryClient = useQueryClient();
  // TRPC生成的queryKey格式为[procedureName]，比如这里是['todos.getAll']
  const { data: todos } = trpc.todos.getAll.useQuery();

  return (
    <button
      onClick={() => {
        queryClient.cancelQueries({ queryKey: ['todos.getAll'] });
      }}
    >
      取消查询
    </button>
  );
}

如果不想取消后自动重新获取，可添加refetchActive: false参数：

queryClient.cancelQueries({ queryKey: ['todos.getAll'], refetchActive: false });

方法二：手动传递AbortController的signal #

若需细粒度控制单个请求实例，可通过TRPC的context参数传递signal：

import { useEffect } from 'react';
import { trpc } from '@trpc/react-query';

export function UserProfile({ userId }) {
  const ac = new AbortController();
  const { data: user } = trpc.userById.useQuery(userId, {
    context: {
      signal: ac.signal,
    },
  });

  // 组件卸载时清理控制器，避免内存泄漏
  useEffect(() => {
    return () => ac.abort();
  }, [ac]);

  return (
    <button
      onClick={() => {
        ac.abort();
      }}
    >
      取消用户信息查询
    </button>
  );
}

TRPC会自动将context中的signal传递到底层请求适配器，实现请求中止。

内容的提问来源于stack exchange，提问作者basarat