Registry / testing / graphql-codegen-svelte-apollo

graphql-codegen-svelte-apollo

library1.1.0jsnpmunverified

GraphQL Code Generator plugin for generating fully typed Apollo client queries as reactive Svelte stores. Version 1.1.0, maintained. Key differentiator: integrates Apollo's reactive system with Svelte stores, enabling auto-refetch on variable changes. Works with @graphql-codegen/cli ecosystem. Supports observable and async queries via config.

testing devops

npm install graphql-codegen-svelte-apollo

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · GRAPHQL-CODEGEN-SV

graphql-codegen-svelte-apollo

testingjavascriptv1.1.0

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.

generated query (e.g. Transactions)

✓ import { Transactions } from './generated'

✗ import Transactions from './generated'

Generated queries are named exports, not default exports.

apollo client (default export)

✓ import client from './apollo-client'

✗ import { client } from './apollo-client'

clientPath config expects a file with default export named 'client'.

graphql-codegen config

✓ import type { CodegenConfig } from '@graphql-codegen/cli'

✗ const { CodegenConfig } = require('@graphql-codegen/cli')

TypeScript type import only; no runtime value.

Configures codegen to generate Svelte Apollo stores and demonstrates reactive query usage in a component.

// codegen.yml schema: './schema.graphql' documents: './src/**/*.graphql' generates: ./src/generated.ts: plugins: - typescript - typescript-operations - graphql-codegen-svelte-apollo config: clientPath: './apollo-client' // Run: npx graphql-codegen // In Svelte component: <script lang="ts"> import { Transactions } from './generated'; import client from './apollo-client'; let address = '0x0000000000000000000000000000'; $: t = Transactions({ address, client }); </script> <ul> {#each $t?.data?.transactions || [] as transaction} <li>{transaction.from} to {transaction.to}</li> {/each} </ul>

Debug

Known issues

breakingIn v1.0.0, the 'client' parameter is now required in generated functions.

fix

Pass { client } object to generated query functions explicitly.

affects: >=1.0.0

deprecatedasyncQuery option may be deprecated in future versions.

fix

Consider migrating to observable queries or use the 'asyncQuery' config as documented.

affects: >=1.0.0

gotchaGenerated queries are reactive Svelte stores; accessing $t is required to subscribe.

fix

Use the $ prefix to reactively read the store value in Svelte templates.

affects: all

gotchaclientPath must point to a file that exports an ApolloClient instance as default export.

fix

Ensure the file has 'export default client;' where client is new ApolloClient(...).

affects: all

gotchaThis plugin only generates client-side queries; mutations and subscriptions are not supported.

fix

Use other GraphQL Codegen plugins for mutations/subscriptions.

affects: all

Errors

Common errors & fixes

Cannot find module 'graphql-codegen-svelte-apollo'

Missing installation or incorrect plugin name in codegen.yml

fix

Run npm install -D graphql-codegen-svelte-apollo and ensure plugin name matches exactly.

Error: Must provide 'client' argument to generated query function

Generated function called without client object

fix

Pass { client } as the first argument, e.g., Transactions({ client }).

TypeError: Cannot read properties of undefined (reading 'watchQuery')

Client instance is not an ApolloClient

fix

Ensure clientPath points to a file exporting an ApolloClient instance.

Uncaught (in promise) Error: Store is not a function

Missing the $ prefix when accessing generated store

fix

Use $t instead of t in Svelte template.

Upgrade

Version history

1.1.0latest on npm

Audit

Dependencies

graphqlrequiredpeer dependency required for code generation

@graphql-codegen/clioptionalrequired in devDependencies to run codegen

@graphql-codegen/typescriptoptionalprerequisite plugin for TypeScript types

@graphql-codegen/typescript-operationsoptionalprerequisite plugin for operation types

Agent activity

4 hits · last 30 days

node

Resources

githubhttps://github.com/ticruz38/graphql-codegen-svelte-apollo ↗

packagegraphql-codegen-svelte-apollo ↗

homepagehttps://github.com/ticruz38/graphql-codegen-svelte-apollo#readme ↗