Skip to content

Commit

Permalink
Breakout Hooks Docs into Seperate Pages (#632)
Browse files Browse the repository at this point in the history
* 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

Co-authored-by: William Johnston <[email protected]>
  • Loading branch information
blakewilson and wjohnsto authored Nov 5, 2021
1 parent 8d9bc5f commit 84ba1b1
Show file tree
Hide file tree
Showing 19 changed files with 627 additions and 475 deletions.
6 changes: 3 additions & 3 deletions docs/next/guides/authentication.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,7 @@ Redirect based authentication is the default strategy in Faust.js. This strategy

This strategy is great for use cases where your authenticated users are admins/editors/etc. and do not necessarily need a "white label" login/register experience. Typically, you would use the redirect strategy if your primary reason for authentication is previews.

Since Redirect based authentication is the default authentication method, there is no configuration needed on your end to use it. It comes out of the box, and you'll see it in action when using previews or the [`useAuth`](/docs/next/reference/custom-hooks#useauth) hook.
Since Redirect based authentication is the default authentication method, there is no configuration needed on your end to use it. It comes out of the box, and you'll see it in action when using previews or the [`useAuth`](/docs/next/reference/hooks/useAuth) hook.

### Local Based Authentication

Expand Down Expand Up @@ -149,7 +149,7 @@ The `useLogin` hook exports an object with the following properties:
- `data`: the response data from the login request.
- `error`: the error from the login request.

For a more detailed explanation of the `useLogin` hook, see the [`useLogin` hook docs](/docs/next/reference/custom-hooks#uselogin) .
For a more detailed explanation of the `useLogin` hook, see the [`useLogin` hook docs](/docs/next/reference/hooks/useLogin) .

Upon a successful login, a refresh token will be stored in a secure, http only cookie, as well as the access token in memory to use for subsequent authenticated requests. A login request can be confirmed it succeeded by checking for the `code` property in the `data` object.

Expand Down Expand Up @@ -241,4 +241,4 @@ export default function Page() {
}
```

**Note:** The [`useAuth`](/docs/next/reference/custom-hooks#useauth) hook fetches the applicable tokens and ensures that the user is authenticated. Therefore, you should check for `isAuthenticated` prior to making authenticated requests, as doing so too early will result in a request without a valid access token.
**Note:** The [`useAuth`](/docs/next/reference/hooks/useAuth) hook fetches the applicable tokens and ensures that the user is authenticated. Therefore, you should check for `isAuthenticated` prior to making authenticated requests, as doing so too early will result in a request without a valid access token.
19 changes: 10 additions & 9 deletions docs/next/guides/fetching-data.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -127,11 +127,11 @@ This will ensure Faust.js uses the correct client to make requests on your behal

## Using the Client to Make Queries

Assuming you have created a client using the Faust.js `getClient` function, you will be able to take advantage of many of the added features that Faust.js provides, and also the general features provided by GQty. You can read our [hooks for fething data reference](../reference/custom-hooks) for examples on how to use some of the built-in hooks using the Faust.js client, but the client will support any query to your Headless WordPress API. Let's look at a few examples of how to use the client to make queries.
Assuming you have created a client using the Faust.js `getClient` function, you will be able to take advantage of many of the added features that Faust.js provides, and also the general features provided by GQty. You can read our [hooks for fetching data reference](../reference/hooks) for examples on how to use some of the built-in hooks using the Faust.js client, but the client will support any query to your Headless WordPress API. Let's look at a few examples of how to use the client to make queries.

### The useQuery Hook

If you are not able to use one of the [WordPress-specific hooks](../reference/custom-hooks) you can use the `useQuery` hook to make a query to the Headless WordPress API. This hook is useful for making any query supported by your Headless WordPress API. It essentially exposes your entire generated GQL schema to you for you to use what you need. For example, say you have a `Header` component and you want to fetch menu items from your "Primary" menu in WordPress. You could do so as follows:
If you are not able to use one of the [WordPress-specific hooks](../reference/hooks) you can use the `useQuery` hook to make a query to the Headless WordPress API. This hook is useful for making any query supported by your Headless WordPress API. It essentially exposes your entire generated GQL schema to you for you to use what you need. For example, say you have a `Header` component and you want to fetch menu items from your "Primary" menu in WordPress. You could do so as follows:

```tsx title=src/components/Header.tsx {4,12-15,30-36}
import React from 'react';
Expand Down Expand Up @@ -222,7 +222,8 @@ export function PostForm() {
content: content.value,
},
});
}}>
}}
>
<input type="text" name="postTitle" placeholder="Title" />
<textarea name="content" placeholder="Content" />
<input disabled={isLoading} type="submit" value="Send" />
Expand Down Expand Up @@ -269,15 +270,15 @@ The `logQueries` function returns a function that you can call to turn the log o

```ts
if (process.env.NODE_ENV === 'development') {
const unsubscribe = logQueries(client)
const unsubscribe = logQueries(client);

// queries are now logging
// ...
// queries are now logging
// ...

unsubscribe();
unsubscribe();

// queries no longer log
// ...
// queries no longer log
// ...
}
```

Expand Down
65 changes: 65 additions & 0 deletions docs/next/guides/logging-queries.mdx
Original file line number Diff line number Diff line change
@@ -0,0 +1,65 @@
---
slug: /next/guides/logging-queries
title: Logging Queries
description: You can log all the queries that are executed in Faust.js
---

In a development environment, you may want to log GraphQL queries that are being executed in your application. Faust.js provides a function, `logQueries`, to do this.

`logQueries` is called within your `client/index.ts` file. Take the following `client/index.ts` example:

```ts title="client/index.ts" {23-25}
/**
* GQTY: You can safely modify this file and Query Fetcher based on your needs
*/
import type { IncomingMessage } from 'http';
import { getClient } from '@faustjs/next';
import {
generatedSchema,
scalarsEnumsHash,
GeneratedSchema,
SchemaObjectTypes,
SchemaObjectTypesNames,
} from './schema.generated';

export const client = getClient<
GeneratedSchema,
SchemaObjectTypesNames,
SchemaObjectTypes
>({
schema: generatedSchema,
scalarsEnumsHash,
});

if (process.env.NODE_ENV === 'development') {
logQueries(client);
}

export function serverClient(req: IncomingMessage) {
return getClient<GeneratedSchema, SchemaObjectTypesNames, SchemaObjectTypes>({
schema: generatedSchema,
scalarsEnumsHash,
context: req,
});
}

export * from './schema.generated';
```

Note the conditional check for the node environment. It is recommended that you only log queries in a dev environment, and not in production.

Additionally, the `logQueries` function returns a function than can be called to turn off the logger:

```ts
if (process.env.NODE_ENV === 'development') {
const unsubscribe = logQueries(client);

// queries are now logging
// ...

unsubscribe();

// queries no longer log
// ...
}
```
Loading

0 comments on commit 84ba1b1

Please sign in to comment.