diff --git a/docs/next/gqty-intro.mdx b/docs/next/gqty-intro.mdx new file mode 100644 index 000000000..0ea5dc246 --- /dev/null +++ b/docs/next/gqty-intro.mdx @@ -0,0 +1,81 @@ +--- +slug: /next/gqty-intro +title: Introduction to GQty +description: Faust.js uses GQty under the hood as a GraphQL client +--- + +Faust uses GQty under the hood. + +GQty is a fundamentally new approach to a GraphQL client. GQty works by generating queries at runtime based on the data your app consumes. This means you no longer have to write queries by hand. + +## How it works + +Take the following example code: + +```tsx +import { client } from 'client'; + +export default function Page() { + const { useQuery } = client; + const generalSettings = useQuery().generalSettings; + + return ( + <> +
{generalSettings.description}
+ > + ); +} +``` + +This would result in the following query being generated automatically: + +```graphql +query { + generalSettings { + title + description + } +} +``` + +For further reading into how GQty works, check out the [GQty "What is it & why" docs](https://gqty.dev/docs/intro). + +## GQty React Hooks + +Faust.js exports the [GQty React hooks](https://gqty.dev/docs/react/fetching-data#fetching-data-with-react) from the `client`. They can be used as so: + +```tsx +import { client } from 'client'; + +export default function Page() { + const { + useQuery, + usePaginatedQuery, + useTransactionQuery, + useLazyQuery, + useRefetch, + prepareQuery, + } = client; + + return <>...>; +} +``` + +You can find the docs for each of these hooks below: + +- [useQuery](https://gqty.dev/docs/react/fetching-data#usequery) +- [usePaginatedQuery](https://gqty.dev/docs/react/fetching-data#usepaginatedquery) +- [useTransactionQuery](https://gqty.dev/docs/react/fetching-data#usetransactionquery) +- [useLazyQuery](https://gqty.dev/docs/react/fetching-data#uselazyquery) +- [useRefetch](https://gqty.dev/docs/react/fetching-data#userefetch) +- [prepareQuery](https://gqty.dev/docs/react/fetching-data#preparequery) + +## Further Reading + +For most cases, GQty related functionality is covered in the [GQty docs](https://gqty.dev/docs). Some of the common use cases are: + +- [Fetching data in React](https://gqty.dev/docs/react/fetching-data) +- [Using Mutations in React](https://gqty.dev/docs/react/mutations) +- [Fetching data in `getStaticProps` or `getServerSideProps` with `inlineResolved`](https://gqty.dev/docs/client/fetching-data#inlineresolved) +- [High level overview how GQty works](https://gqty.dev/docs/intro/how-it-works) diff --git a/internal/website/sidebars.js b/internal/website/sidebars.js index 977877944..5a11a3837 100644 --- a/internal/website/sidebars.js +++ b/internal/website/sidebars.js @@ -51,6 +51,11 @@ module.exports = { label: 'Getting Started', id: 'next/getting-started', }, + { + type: 'doc', + label: 'Introduction to GQty', + id: 'next/gqty-intro', + }, { type: 'category', label: 'Guides',