Usage in React

Gqlts methods are just functions that return promises, to use gqlts in a react application you need a query manager like swr or react-query

Example with swr

First install the packages if missing


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>
}

you must declare the swr fetcher function separately or typescript completion will not work, it looks like typescript has a a bug

Example with react-query

First install the packages if missing


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>
}

you must declare the react-query fetcher function separately or typescript completion will not work, it looks like typescript has a a bug