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: