Adds built-in AbortController support to Apollo React hooks generated by GraphQL Code Generator which aborts the query when query hook unmounts

This package is a custom plugin for GraphQL Code Generator that extends the popular typescript-react-apollo plugin.

It wraps generated Apollo React hooks with a custom hook that automatically manages an AbortController signal, cancelling in-flight queries when query hook umounts.

• Automatically adds request cancellation support to your generated hooks.
• Keeps TypeScript types intact.
• No extra work needed in your components — just use the generated hooks as usual!

npm install typescript-react-apollo-with-abort-controller # or yarn add typescript-react-apollo-with-abort-controller

In your codegen.yml (or equivalent) config file, add typescript-react-apollo-with-abort-controller instead of typescript-react-apollo:

generates: { 'path/to/generated/hooks.tsx': { plugins: [ - 'typescript-react-apollo' + 'typescript-react-apollo-with-abort-controller' ] } }

This will generate hooks wrapped with abort controller support seamlessly.

import { useMyQuery } from "./path/to/generated/hooks"; const Component = () => { const { data, loading, error } = useMyQuery(); // useMyQuery will now have built-in abort controller support // cancelling requests when component unmounts return <div>{loading ? "Loading..." : JSON.stringify(data)}</div>; };

MIT