graphql-tag-ts
TypeScript icon, indicating that this package has built-in type declarations

0.1.16 • Public • Published

graphql-tag-ts

npm version

yarn add graphql-tag-ts

or

npm install graphql-tag-ts

This project is basically strongly typed graphql-tag using Module augmentation.

Just installing this package you will be able to inject the types in your query declarations, no need to declaring them elsewhere or having to declare them when calling your queries.

queries file

import gql, { DocumentNode } from "graphql-tag-ts";
import gql_two from "graphql-tag";
/**
 * You can import either version, this library
 * is only doing module augmentation
 * but using graphql-tag-ts is a safe bet
 */
 
export const query_one = gql<
  { hello{ worldstring } },
  { variablestring }
>`
  query($variable: String!) {
    hello {
      world
    }
  }
`;
 
/**
 * You also can cast the DocumentNode type to the object.
 * This method is better if you don't want to lose
 * GraphQL query highlighting in your editor
 */
 
export const query_two: DocumentNode<
  { hello{ worldstring } },
  { variablestring }
> = gql`
  query($variable: String!) {
    hello {
      world
    }
  }
`;

application

import { useQuery } from "@apollo/react-hooks";
import { query_one } from "./queries";
 
export default () => {
  // "data" is strongly typed!
  // data = { hello: { world: string } } | undefined
  const { data, loading } = useQuery(query_one, {
    // "variables" is strongly typed too!
    // variables = { variable: string } | undefined
    variables: {
      variable: "HelloWorld!"
    }
  });
 
  return <div>{loading ? "Loading..." : data?.hello.world ?? "Not found"}</div>;
};

Functions available


The module augmentation needs to be specified for every function that is required, so as is right now we are augmenting:

From @apollo/react-hooks

  • useQuery
  • useMutation
  • useLazyQuery
  • useSubscription

From apollo-server-integration-testing

  • query
  • mutate

If you want another library / function to be added please feel free to request it in the issues or send a pull request.

Usage with babel-plugin-graphql-tag


To use babel-plugin-graphql-tag (highly recommended) all you need to specify is the importName configuration option in your babel configuration.

.babelrc

{
  ...
  "plugins": [
    ...
    ["babel-plugin-graphql-tag", { "importName": "graphql-tag-ts" }]
  ]
}
 

Versions

Current Tags

  • Version
    Downloads (Last 7 Days)
    • Tag
  • 0.1.16
    161
    • latest

Version History

Package Sidebar

Install

npm i graphql-tag-ts

Weekly Downloads

164

Version

0.1.16

License

MIT

Unpacked Size

8.34 kB

Total Files

7

Last publish

Collaborators

  • pablosz