Skip to main content

Introduction to GQty

Faust.js uses GQty under the hood for its GraphQL client.

GQty is a new approach to a GraphQL client. Instead of defining queries by hand, GQty generates queries for you at runtime based on the data your app consumes. Take the following example:

Your app consumes the title and description from generalSettings:

Your App
import { client } from 'client'

export default function App() {
    const query = client.useQuery()

    return(
        <h1>{query.generalSettings.title}</h1>
        <p>{query.generalSettings.description}</p>
    )
}

The following query is automatically generated and requested for you:

query {
  generalSettings {
    title
    description
  }
}

React Hooks​

GQty has React Hooks for fetching data, mutations, subscriptions, and more:

Faust.js exports these hooks from the client. You can use them in your React components like so:

import { client } from 'client';

export default function App() {
  const {
    useQuery,
    usePaginatedQuery,
    useTransactionQuery,
    useLazyQuery,
    useRefetch,
    useMutation,
    useSubscription,
  } = client;

  return(
    ...
  )
}

Further Reading​

We recommend reading the "What Is & Why" and "How It Works" docs to get a better picture of how GQty works.

Additionally, the following docs may be helpful: