Usage in React

npm i swr @gqlts/runtime

import React, { useState } from 'react'
import useSWR from 'swr'
import { createClient, everything } from './generated'
const client = createClient()
 
const Page = () => {
    const [filter, setFilter] = useState('.*')
    // IMPORTANT: you must declare the fetcher function separately or typescript completion will not work, it looks like that typescript has a a bug
    const fetcher = (filter) =>
        client.query({
            countries: [
                { filter: { continent: { regex: filter } } },
                { name: 1, code: 1, languages: { ...everything } },
            ],
        })
    const { data, error } = useSWR([filter], fetcher)
    return <div>{JSON.stringify(data)}</div>
}

npm i react-query @gqlts/runtime

import React, { useState } from 'react'
import { useQuery } from 'react-query'
import { createClient, everything } from './generated'
const client = createClient()
 
const Page = () => {
    const [regex, setRegex] = useState('.*')
    // IMPORTANT: you must declare the fetcher function separately or typescript completion will not work, it looks like that typescript has a a bug
    const fetcher = (_, regex) =>
        client.query({
            countries: [
                { filter: { continent: { regex: regex } } },
                { name: 1, code: 1 },
            ],
        })
    const { data, error } = useQuery(['countries-key', regex], fetcher)
    return <div>{JSON.stringify(data)}</div>
}