react + apollo/client 实现中断接口请求

ninieleon

已于 2023-04-19 17:38:56 修改

阅读量221

点赞数

分类专栏： react apollo/client 文章标签： react.js 前端

于 2023-04-18 19:11:14 首次发布

本文链接：https://blog.youkuaiyun.com/qq_46602557/article/details/130228943

版权

react 同时被 2 个专栏收录

1 篇文章

订阅专栏

apollo/client

1 篇文章

订阅专栏

该文章展示了如何在React组件中利用Apollo/client的useQueryHook和AbortController来实现对接口请求的中断。当用户点击‘中断请求’按钮时，调用AbortController的abort方法，从而取消正在进行的GraphQL查询。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

react + apollo/client 实现中断接口请求

import { useQuery } from '@apollo/client';
import { useState } from 'react';


const ExampleComponent = () => {
  const [controller, setController] = useState(null);

  const { data } = useQuery(MY_QUERY, {
    context: {
      fetchOptions: {
        signal: controller?.signal // 将AbortSignal与请求关联
      }
    }
  });

  const handleAbort = () => {
    if (controller) {
      controller.abort(); // 执行中断请求的方法
    }
  };

  return (
    <>
      <button onClick={() => setController(new AbortController())}>发起请求</button>
      <button onClick={handleAbort}>中断请求</button>
    </>
  );
};