Usage with other clients

Gqlts exposes a generateQueryOp and generateMutationOp that let you use queries as code with any client.

generateQueryOp returns an object with a query and variables fields, you can pass them to any client

import { generateQueryOp, generateMutationOp } from './generated'
const { query, variables } = generateQueryOp({
    // your query
    countries: {
        name: true,
        code: true,
    },
})

Usage with apollo and react

To use with apollo first generate query and variables with generateQueryOp, then pass them to useQuery

import React from 'react'
import { useQuery, ApolloProvider } from '@apollo/react-hooks'
import gql from 'graphql-tag'
import { generateQueryOp } from '../generated/'
 
const Page = () => {
    const { query, variables } = generateQueryOp({
        countries: {
            name: 1,
            code: 1,
        },
    })
    const { data, error } = useQuery(gql(query), {
        variables,
    })
    return <div>{JSON.stringify(data)}</div>
}

If you want you can also apply a type to the resulting data

import React from 'react'
import { useQuery, ApolloProvider } from '@apollo/react-hooks'
import gql from 'graphql-tag'
import { generateQueryOp, QueryResult } from '../generated/'
 
const Page = () => {
    const q = {
        countries: tuple([
            { argument: 'exampleArgument' },
            {
                name: 1,
                code: 1,
            },
        ]), // tell typescript this is a tuple and not an array
    }
    const { query, variables } = generateQueryOp(q)
    const { data, error } = useQuery<QueryResult<typeof q>>(gql(query), {
        variables,
    })
    return <div>{JSON.stringify(data)}</div>
}
 
function tuple<T1, T2>(data: [T1, T2]): typeof data
function tuple(data: Array<any>) {
    return data
}

usage-in-react cli