typescript-react-apollo-with-abort-controller

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

What is this?

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.

Why use this?

• 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!

Installation

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

Usage

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.

Example

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>;
};

License

MIT