graphql-tag-ts

library0.1.16jsnpmunverified

A strongly-typed wrapper around graphql-tag that uses TypeScript module augmentation to automatically infer the types of your GraphQL queries, mutations, and subscriptions without manual type declarations. The current stable version is 0.1.16. It integrates seamlessly with Apollo Client hooks (useQuery, useMutation, etc.) and Apollo Server integration testing utilities. The library is minimal, focusing on type safety, and is actively maintained. Unlike alternatives, it does not require code generation or external tools; just install and your gql template literals become typed.

testing

npm install graphql-tag-ts

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · GRAPHQL-TAG-TS

graphql-tag-ts

testingjavascriptv0.1.16

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.

gql

✓ import gql from 'graphql-tag-ts'

✗ import gql from 'graphql-tag'

Default import from graphql-tag-ts provides typed gql. The raw graphql-tag import lacks type augmentation.

DocumentNode

✓ import { DocumentNode } from 'graphql-tag-ts'

✗ import { DocumentNode } from 'graphql'

DocumentNode type from graphql-tag-ts includes generics for data and variables.

useQuery (typed)

✓ import { useQuery } from '@apollo/react-hooks'

No special import needed; graphql-tag-ts augments the existing @apollo/react-hooks module so useQuery automatically infers types when given a typed DocumentNode.

Shows how to define a typed GraphQL query using gql from graphql-tag-ts and use it with Apollo's useQuery, getting full type inference for data and variables.

import gql from 'graphql-tag-ts'; import { useQuery } from '@apollo/react-hooks'; export const GET_HELLO = gql<{ hello: { world: string } }, { variable: string }>` query($variable: String!) { hello { world } } `; function MyComponent() { const { data, loading } = useQuery(GET_HELLO, { variables: { variable: 'HelloWorld!' }, }); return <div>{loading ? 'Loading...' : data?.hello.world}</div>; }

Debug

Known issues

gotchaUsing graphql-tag's gql instead of graphql-tag-ts's gql will not augment types.

fix

Import gql from 'graphql-tag-ts' instead of 'graphql-tag'.

affects: >=0.1.0

breakingOnly augments specific Apollo hooks: useQuery, useMutation, useLazyQuery, useSubscription from @apollo/react-hooks. Other hooks (e.g., useApolloClient) are not typed.

fix

Manually type your queries if using non-augmented hooks.

affects: >=0.1.0

deprecatedThe @apollo/react-hooks package is deprecated in favor of @apollo/client (Apollo Client 3+).

fix

Use @apollo/client and consider using graphql-tag-ts with module augmentation for @apollo/client (may need separate augmentation).

affects: >=0.1.0

gotchaType arguments must be provided to gql explicitly; omitted types default to any.

fix

Always provide generic parameters: gql<Data, Variables>`...`.

affects: >=0.1.0

gotchagraphql-tag-ts only augments DocumentNode type. If you use other functions like useFragment, they are not typed.

fix

Use manual typing or additional augmentations for other functions.

affects: >=0.1.0

Errors

Common errors & fixes

Module '"graphql-tag"' has no exported member 'DocumentNode'.

Importing DocumentNode from graphql-tag instead of graphql-tag-ts.

fix

import { DocumentNode } from 'graphql-tag-ts';

Type 'DocumentNode<{}, {}>' is not assignable to type 'DocumentNode<{ hello: { world: string } }, { variable: string }>'.

Using untyped gql from graphql-tag.

fix

Use gql from graphql-tag-ts with generic parameters.

Cannot use namespace 'gql' as a type.

Attempting to use gql as a type instead of a function.

fix

Remove type annotation; gql is a function, not a type.

Property 'world' does not exist on type 'never'.

Not providing type arguments to gql, leaving data type as never.

fix

Add generic type arguments to gql: gql<Data, Variables>`...`.

Upgrade

Version history

0.1.16latest on npm

Audit

Dependencies

graphqlrequiredpeer dependency used by graphql-tag

@apollo/react-hooksoptionalpeer dependency for Apollo hooks type augmentation

apollo-server-integration-testingoptionalpeer dependency for Apollo testing type augmentation

Agent activity

4 hits · last 30 days

node

Resources

githubhttps://github.com/PabloSzx/graphql-tag-ts ↗

packagegraphql-tag-ts ↗

homepagehttps://github.com/PabloSzx/graphql-tag-ts ↗