TypeScript x GraphQL
A utility to enhance the developer experience of writing GraphQL in TypeScript.
Installlation
npm install --save tsxgql
Usage
Defines GraphQL-like JS Object:
types
helper defines types in the result, and the params
helper defines the parameters.
Converts the JS Object to GraphQL (string):
console.loggqlString// =>// query getUser {// user(id: 1) {// id// name// bankAccount {// id// branch// }// }// }
Executes the GraphQL:
// We would like to type this! // As we cast `result` to `typeof getUser`,// Now, `result` type looks like this:// interface result {// user: {// id: number// name: string// bankAccount: {// id: number// branch?: string// }// }// }
Features
Currently tsxgql
can convert these GraphQL features:
- Operations
- Query
- Mutation
- Subscription
- Inputs
- Variables
- Parameters
- Data structures
- Nested object query
- Array query
- Scalar types
number
string
boolean
- Enum
- Constant
- Custom type
- Optional types, e.g.)
number | undefined
- Fragments
- Inline Fragments
Examples
Basic Query
query getUser { user { id name isActive }}
query'getUser',
Without Query Name
query { user { id name isActive }}
query
Basic Mutation
mutation updateUserMutation($input: UserInput!) { updateUser(input: $input) { id name }}
mutation'updateUserMutation', params,
Nested Query
query getUser { user { id name parent { id name grandParent { id name children { id name } } } }}
query'getUser',
Array Field
query getUsers { users(status: 'active') { id name }}
query'users',
Optional Field
query'getUser',
Constant field
query getUser { user { id name __typename # <-- Always `User` }}
query'getUser',
Enum field
query getUser { user { id name type # <-- `Student` or `Teacher` }}
query'getUser',
Multiple Queries
query getFatherAndMother { father { id name } mother { id name }}
query'getFatherAndMother',
Query Alias
via a dynamic property.
query getMaleUser { maleUser: user { id name }}
query'getMaleUser',
Standard fragments
query { user(id: 1) { ...userFragment } maleUsers: users(sex: MALE) { ...userFragment }} fragment userFragment on User { id name bankAccount { ...bankAccountFragment }} fragment bankAccountFragment on BankAccount { id branch}
query
Inline Fragment
query getHeroForEpisode { hero { id ... on Droid { primaryFunction } ... on Human { height } }}
query'getHeroForEpisode',
discriminated union pattern
query getHeroForEpisode { hero { id ... on Droid { kind primaryFunction } ... on Human { kind height } }}
query'getHeroForEpisode',
returns a type of A | B
if droidOrHuman.kind === 'Droid' else if droidOrHument.kind === 'Human'
Usage w/ React Native