@bearbytes/graphql-to-typescript
This is a compiler that takes a GraphQL Schema and one or more GraphQL Document files (containing client-side queries, mutations or subscriptions), and generates a Typescript file with type information about these documents, that can be consumed by other
Last updated 7 months ago by pancomputationalist .
ISC · Original npm · Tarball · package.json
$ cnpm install @bearbytes/graphql-to-typescript 
SYNC missed versions from official npm registry.

graphql-to-typescript

This is a compiler that takes a GraphQL Schema and one or more GraphQL Document files (containing client-side queries, mutations or subscriptions), and generates a Typescript file with type information about these documents, that can be consumed by other tools, such as typed-apollo-client.

Example Usage

Consider this simple schema:

type Query {
  users: [User!]!
  userById(id: ID!): User
}

type User {
  id: ID!
  name: String!
  photoUrl: String
}

Usually, we'll write our operations in GraphiQL or GraphQL Playground, and then copy them into a .gql file in our client code. In this example, we're creating two queries and a Fragment definition, which makes it easier to make sure that we're getting the same fields in both cases.

# my-operations.gql

fragment UserInfo on User {
  id
  name
}

query getAllUsers {
  users {
    ...UserInfo
  }
}

query getUserById($userId: ID!) {
  userById(id: $userId) {
    ...UserInfo
    photoUrl
  }
}

Now we run the compiler:

npx graphql-to-typescript           \
  --schema my-endpoint              \
  --documents src/**/*.gql          \
  --outFile src/graphql-operations.ts

The generated file graphql-operations.ts will export

  • An object containing all the operations as default export
  • The UserInfo interface

The default export can be passed directly into typed-apollo-client, or it can be used to extract type information about the operations using some helper types:

import {
  OperationVariables,
  OperationData,
} from '@bearbytes/graphql-to-typescript'
import GraphQLOperations, { UserInfo } from './graphql-operations' // generated file

type T = typeof GraphQLOperations

// const queryString = `
//    query getUserById($userId: ID!) {
//      userById(id: $userId) {
//        ...UserInfo
//        photoUrl
//      }
//    }
//    fragment UserInfo on User {
//      id
//      name
//    }
// `
const queryString = GraphQLOperations['getUserById']

// type SomeVars = {
//   userId: string
// }
type SomeVars = OperationVariables<T, 'getUserById'>

// type SomeData = {
//   userById: null | (UserInfo & { photoUrl: null | string })
// }
type SomeData = OperationData<T, 'getUserById'>

Current Tags

  • 0.1.1                                ...           latest (7 months ago)

15 Versions

  • 0.1.1                                ...           7 months ago
  • 0.0.27-alpha.0                                ...           a year ago
  • 0.0.26-alpha.0                                ...           a year ago
  • 0.0.25-alpha.0                                ...           a year ago
  • 0.0.23-alpha.0                                ...           a year ago
  • 0.0.20-alpha.0                                ...           a year ago
  • 0.0.19-alpha.0                                ...           a year ago
  • 0.0.17-alpha.0                                ...           a year ago
  • 0.0.14-alpha.0                                ...           a year ago
  • 0.0.7-alpha.0                                ...           a year ago
  • 0.0.6-alpha.0                                ...           a year ago
  • 0.0.5-alpha.0                                ...           a year ago
  • 0.0.4-alpha.0                                ...           a year ago
  • 0.0.3-alpha.0                                ...           a year ago
  • 0.0.2-alpha.0                                ...           a year ago
Maintainers (1)
Downloads
Today 0
This Week 0
This Month 15
Last Day 0
Last Week 15
Last Month 0
Dependencies (10)
Dev Dependencies (7)

Copyright 2014 - 2016 © taobao.org |