Registry / devops / graphql-codegen-plugin-typescript-swr

graphql-codegen-plugin-typescript-swr

library0.8.5jsnpmunverified

A GraphQL code generator plugin that automatically creates typed SWR hooks (useSWR, useSWRInfinite) from GraphQL operations. Version 0.8.5, actively maintained. Integrates with graphql-request and the GraphQL Codegen ecosystem. Unlike manual SWR wrapping, it auto-generates hooks with optimal caching keys and supports pagination, custom keys, and exclusion patterns. Requires graphql <17, and peer dependency on graphql-codegen typescript plugins. Ships TypeScript types.

devops

npm install graphql-codegen-plugin-typescript-swr

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · GRAPHQL-CODEGEN-PL

graphql-codegen-plugin-typescript-swr

devopsjavascriptv0.8.5

harness data pending

Install & Compatibility

Where this runs

No compatibility data collected yet for this library.

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

getSdkWithHooks

✓ import { getSdkWithHooks } from './generated/sdk'

✗ import { getSdkWithHooks } from 'graphql-codegen-plugin-typescript-swr'

The generated file path depends on your codegen output configuration, not the package itself.

useContinents

✓ const { data, error } = sdk.useContinents('key')

✗ const { data, error } = sdk.useContinents()

The first argument is the SWR key (string) required for caching.

useMyQueryInfinite

✓ const { data, size, setSize } = sdk.useMyQueryInfinite('key', getKey, variables, config)

✗ const { data } = sdk.useMyQueryInfinite(variables)

useSWRInfinite requires at least the key and getKey function; variables and config are optional.

Shows how to generate a typed SWR hook and use it in a React component.

import { GraphQLClient } from 'graphql-request'; import { getSdkWithHooks } from './generated/sdk'; const client = new GraphQLClient('https://countries.trevorblades.com/'); const sdk = getSdkWithHooks(client); function Continents() { const { data, error } = sdk.useContinents('Continents'); if (error) return <div>failed to load</div>; if (!data) return <div>loading...</div>; return ( <ul> {data.continents.map(continent => ( <li key={continent.name}>{continent.name}</li> ))} </ul> ); }

Debug

Known issues

breakingRequires graphql <17.0.0 as peer dependency. Will not install with graphql@17+.

fix

Downgrade graphql to ^16.0.0 or use an alternative plugin.

affects: graphql >=17

gotchaThe generated hooks require a SWR key string as first argument; omitting it will not work correctly.

fix

Always pass a string key: sdk.useQueryName('myKey').

affects: >=0.8

deprecatedThe plugin may not be actively maintained; check for newer alternatives like graphql-codegen-typescript-swr.

fix

Evaluate if the package is still maintained, and consider migrating if necessary.

affects: >=0.8.0

Errors

Common errors & fixes

Cannot find module './sdk' or its corresponding type declarations.

The generated SDK file path is incorrect or codegen hasn't been run.

fix

Run graphql-codegen and ensure the import path matches the 'generates' output in your codegen.yml.

Property 'useContinents' does not exist on type 'SdkWithHooks<GraphQLClient>'.

The generated SDK does not include a hook for that query due to exclusion or naming mismatch.

fix

Check your codegen config: ensure the query is not excluded and is named correctly in the .graphql files.

Cannot use 'useSWRInfinite' because the query is not configured for infinite pagination.

The query name is not listed in the 'useSWRInfinite' config option.

fix

Add the query name to the useSWRInfinite list in your codegen.yml under config.

Upgrade

Version history

0.8.5latest on npm

Audit

Dependencies

graphqlrequiredPeer dependency for GraphQL operations

swroptionalRuntime dependency for SWR hooks at runtime

Agent activity

6 hits · last 30 days

node

Resources

githubhttps://github.com/croutonn/graphql-codegen-plugin-typescript-swr ↗

packagegraphql-codegen-plugin-typescript-swr ↗

homepagehttps://github.com/croutonn/graphql-codegen-plugin-typescript-swr ↗