Intro to GQty (#652)

* doc: (#519) adding examples for getStaticPaths * Update API Router auth import docs * Update API Router imports to use `@faustjs/core/api` * Breakout Hooks into individual Pages (#631) * docs: break out hooks * Update links to appropriate hooks url * Logging queries guide * Fix docs site URLs * Fix hooks links * docs: GQty introduction * Revert "docs: GQty introduction" This reverts commit a952a04. * docs: intro to GQty Co-authored-by: William Johnston <[email protected]>
wpengine · Nov 17, 2021 · e3f68d1 · e3f68d1 · headless-platform-by-wp-engine · Nov 17, 2021
1 parent c2c6bba
commit e3f68d1
Show file tree

Hide file tree

Showing 2 changed files with 85 additions and 0 deletions.
diff --git a/docs/gqty-intro.mdx b/docs/gqty-intro.mdx
@@ -0,0 +1,80 @@
+---
+slug: /gqty-intro
+title: Introduction to GQty
+description: Introduction to GQty in Faust.js
+---
+
+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`:
+
+```tsx title="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:
+
+```graphql
+query {
+  generalSettings {
+    title
+    description
+  }
+}
+```
+
+## React Hooks
+
+GQty has React Hooks for fetching data, mutations, subscriptions, and more:
+
+- [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)
+- [useMutation](https://gqty.dev/docs/react/mutations#usemutation)
+- [useSubscription](https://gqty.dev/docs/react/subscriptions#usesubscription)
+
+Faust.js exports these hooks from the `client`. You can use them in your React components like so:
+
+```tsx
+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"](https://gqty.dev/docs/intro) and ["How It Works"](https://gqty.dev/docs/intro/how-it-works) docs to get a better picture of how GQty works.
+
+Additionally, the following docs may be helpful:
+
+- [Features](https://gqty.dev/docs/intro/features)
+- [Fetching Data in React](https://gqty.dev/docs/react/fetching-data)
+- [react Suspense & Usage Without](https://gqty.dev/docs/react/suspense)
+- [Helper Functions](https://gqty.dev/docs/client/helper-functions)
diff --git a/internal/website/sidebars.js b/internal/website/sidebars.js
@@ -171,6 +171,11 @@ module.exports = {
         },
       ],
     },
+    {
+      type: 'doc',
+      label: 'Introduction to GQty',
+      id: 'gqty-intro',
+    },
     {
       type: 'doc',
       label: 'Release Notes',