Skip to content

Commit

Permalink
Squashed commit of the following:
Browse files Browse the repository at this point in the history
commit 40d08d0
Author: William Johnston <will@wwj.dev>
Date:   Fri Oct 22 13:47:00 2021 -0700

    fix: exporting components from declaration

commit 145ef99
Merge: 632a57f 4d7f981
Author: William Johnston <will@wwj.dev>
Date:   Fri Oct 22 10:46:13 2021 -0700

    Merge branch 'canary' into next-refactor

commit 632a57f
Author: William Johnston <will@wwj.dev>
Date:   Fri Oct 22 10:05:38 2021 -0700

    feat: (#591) adding changeset denoting breaking change

commit 7f2a760
Author: William Johnston <will@wwj.dev>
Date:   Fri Oct 22 09:55:23 2021 -0700

    feat: (#591) limiting root @faustjs/next exports to those needed by client

commit b1ba602
Author: William Johnston <will@wwj.dev>
Date:   Fri Oct 22 09:48:03 2021 -0700

    feat: (#591) creating @faustjs/next/components export

commit e4ad3ea
Author: William Johnston <will@wwj.dev>
Date:   Fri Oct 22 09:46:28 2021 -0700

    feat: (#591) creating @faustjs/next/server export

commit 69b6321
Author: William Johnston <will@wwj.dev>
Date:   Fri Oct 22 09:43:46 2021 -0700

    feat: (#591) creating @faustjs/next/log export

commit 9be7e1d
Author: William Johnston <will@wwj.dev>
Date:   Fri Oct 22 09:41:23 2021 -0700

    feat: (#591) creating @faustjs/next/config export

commit 664bb90
Author: William Johnston <will@wwj.dev>
Date:   Fri Oct 22 09:38:01 2021 -0700

    feat: (#591) creating @faustjs/next/utils export

commit 38888e8
Author: William Johnston <will@wwj.dev>
Date:   Fri Oct 22 09:36:51 2021 -0700

    feat: (#591) migrating to src/gqty and exposing @faustjs/next/client
  • Loading branch information
blakewilson committed Oct 25, 2021
1 parent e29abf6 commit d15356f
Show file tree
Hide file tree
Showing 49 changed files with 115 additions and 62 deletions.
5 changes: 5 additions & 0 deletions .changeset/twenty-weeks-kiss.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@faustjs/next': minor
---

**BREAKING**: Rename `HeadlessProvider` to `FaustProvider`
8 changes: 4 additions & 4 deletions docs/next/guides/fetching-data.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -104,20 +104,20 @@ To do this you will need to run `gqty generate` again. Running `gqty generate` w

## Providing the GQty Client to Faust.js

Using the boilerplate client code will provide two different GQty clients that you can use depending upon whether you are on the client or server. However, you will still need to provide the client to Faust.js so that it can use it to fetch data. To do this you can use the `HeadlessProvider` component published by Faust.js, and provide it the GQty client you want to use. This is done in your `_app.tsx` file as follows:
Using the boilerplate client code will provide two different GQty clients that you can use depending upon whether you are on the client or server. However, you will still need to provide the client to Faust.js so that it can use it to fetch data. To do this you can use the `FaustProvider` component published by Faust.js, and provide it the GQty client you want to use. This is done in your `_app.tsx` file as follows:

```tsx title=src/pages/_app.tsx {2,9,11}
import 'faust.config';
import { HeadlessProvider } from '@faustjs/next';
import { FaustProvider } from '@faustjs/next';
import { client } from 'client';
import type { AppProps } from 'next/app';

export default function MyApp({ Component, pageProps }: AppProps) {
return (
<>
<HeadlessProvider client={client} pageProps={pageProps}>
<FaustProvider client={client} pageProps={pageProps}>
<Component {...pageProps} />
</HeadlessProvider>
</FaustProvider>
</>
);
}
Expand Down
6 changes: 3 additions & 3 deletions docs/next/guides/post-page-previews.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -39,16 +39,16 @@ You'll need to import it at the top of your `_app.tsx` file to ensure the `confi

```tsx title=_app.tsx {1}
import 'faust.config';
import { HeadlessProvider } from '@faustjs/next';
import { FaustProvider } from '@faustjs/next';
import { client } from 'client';
import type { AppProps } from 'next/app';

export default function MyApp({ Component, pageProps }: AppProps) {
return (
<>
<HeadlessProvider client={client} pageProps={pageProps}>
<FaustProvider client={client} pageProps={pageProps}>
<Component {...pageProps} />
</HeadlessProvider>
</FaustProvider>
</>
);
}
Expand Down
14 changes: 7 additions & 7 deletions docs/next/guides/ssr-ssg.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -158,30 +158,30 @@ export async function getServerSideProps(context: GetServerSidePropsContext) {
As mentioned in `getNextStaticProps`, the reason `MyPage` and `client` are passed to `getNextServerSideProps` is because under the hood Faust.js performs a skeleton render of the page component to know what data to fetch and what queries to build. This allows the developer to not have to think about batching/constructing queries, or data fetching.
## Rehydration Using `<HeadlessProvider />`
## Rehydration Using `<FaustProvider />`
In order to properly facilitate SSR and SSG you must use the built-in component published in `faustjs/next` called `HeadlessProvider`. This component performs the following:
In order to properly facilitate SSR and SSG you must use the built-in component published in `faustjs/next` called `FaustProvider`. This component performs the following:
1. Sets the `client` to be used with every request for WordPress data.
1. Hydrates the `client` cache using the prepared cache snapshot from `getNextServerSideProps` or `getNextStaticProps`.
1. Renders its `children`
### Adding `<HeadlessProvider />` to your `_app.tsx`
### Adding `<FaustProvider />` to your `_app.tsx`
Using the `HeadlessProvider` component us easy, and if you are using an example `next` project published by Faust.js it will happen automatically. If you are adding `Faust.js` to your project, you will want to put `HeadlessProvider` at the top of your component tree. Typically in a Next.js app this means in your `pages/_app.tsx` file as follows:
Using the `FaustProvider` component us easy, and if you are using an example `next` project published by Faust.js it will happen automatically. If you are adding `Faust.js` to your project, you will want to put `FaustProvider` at the top of your component tree. Typically in a Next.js app this means in your `pages/_app.tsx` file as follows:
```tsx title=src/pages/_app.tsx {9,11}
import 'faust.config';
import { HeadlessProvider } from '@faustjs/next';
import { FaustProvider } from '@faustjs/next';
import { client } from 'client';
import type { AppProps } from 'next/app';

export default function MyApp({ Component, pageProps }: AppProps) {
return (
<>
<HeadlessProvider client={client} pageProps={pageProps}>
<FaustProvider client={client} pageProps={pageProps}>
<Component {...pageProps} />
</HeadlessProvider>
</FaustProvider>
</>
);
}
Expand Down
10 changes: 5 additions & 5 deletions docs/tutorial/setup-faustjs.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -211,9 +211,9 @@ npm run generate

The `generate` script will create a `client/schema.generated.ts` file upon completion.

### Implement the `<HeadlessProvider>` Component
### Implement the `<FaustProvider>` Component

The `<HeadlessProvider>` is a [Higher-Order Component](https://reactjs.org/docs/higher-order-components.html) that wraps your Next.js app to provide Faust.js with the context needed for fetching data and caching.
The `<FaustProvider>` is a [Higher-Order Component](https://reactjs.org/docs/higher-order-components.html) that wraps your Next.js app to provide Faust.js with the context needed for fetching data and caching.

Replace the existing `pages/_app.tsx` file contents with the following:

Expand All @@ -222,14 +222,14 @@ import '../faust.config';
import '../styles/globals.css';

import type { AppProps /*, AppContext */ } from 'next/app';
import { HeadlessProvider } from '@faustjs/next';
import { FaustProvider } from '@faustjs/next';
import { client } from '../client';

function MyApp({ Component, pageProps }: AppProps) {
return (
<HeadlessProvider client={client} pageProps={pageProps}>
<FaustProvider client={client} pageProps={pageProps}>
<Component {...pageProps} />
</HeadlessProvider>
</FaustProvider>
);
}

Expand Down
6 changes: 3 additions & 3 deletions examples/next/getting-started/src/pages/_app.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import 'faust.config';
import { HeadlessProvider } from '@faustjs/next';
import { FaustProvider } from '@faustjs/next';
import 'normalize.css/normalize.css';
import React from 'react';
import 'scss/main.scss';
Expand All @@ -9,9 +9,9 @@ import type { AppProps } from 'next/app';
export default function MyApp({ Component, pageProps }: AppProps) {
return (
<>
<HeadlessProvider client={client} pageProps={pageProps}>
<FaustProvider client={client} pageProps={pageProps}>
<Component {...pageProps} />
</HeadlessProvider>
</FaustProvider>
</>
);
}
1 change: 1 addition & 0 deletions packages/next/client.d.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export * from './dist/cjs/export/client';
1 change: 1 addition & 0 deletions packages/next/components.d.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export * from './dist/cjs/export/components';
1 change: 1 addition & 0 deletions packages/next/config.d.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export * from './dist/cjs/export/config';
1 change: 1 addition & 0 deletions packages/next/log.d.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export * from './dist/cjs/export/log';
34 changes: 29 additions & 5 deletions packages/next/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -2,13 +2,37 @@
"name": "@faustjs/next",
"version": "0.12.4",
"description": "This module helps you use WordPress as a Headless CMS with Next.js",
"main": "dist/cjs/index.js",
"module": "dist/mjs/index.js",
"types": "dist/cjs/index.d.ts",
"main": "dist/cjs/export/index.js",
"module": "dist/mjs/export/index.js",
"types": "dist/cjs/export/index.d.ts",
"exports": {
".": {
"import": "./dist/mjs/index.js",
"require": "./dist/cjs/index.js"
"import": "./dist/mjs/export/index.js",
"require": "./dist/cjs/export/index.js"
},
"./client": {
"import": "./dist/mjs/export/client.js",
"require": "./dist/cjs/export/client.js"
},
"./components": {
"import": "./dist/mjs/export/components.js",
"require": "./dist/cjs/export/components.js"
},
"./config": {
"import": "./dist/mjs/export/config.js",
"require": "./dist/cjs/export/config.js"
},
"./log": {
"import": "./dist/mjs/export/log.js",
"require": "./dist/cjs/export/log.js"
},
"./server": {
"import": "./dist/mjs/export/server.js",
"require": "./dist/cjs/export/server.js"
},
"./utils": {
"import": "./dist/mjs/export/utils.js",
"require": "./dist/cjs/export/utils.js"
}
},
"scripts": {
Expand Down
1 change: 1 addition & 0 deletions packages/next/server.d.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export * from './dist/cjs/export/server';
Original file line number Diff line number Diff line change
@@ -1,19 +1,19 @@
import isNil from 'lodash/isNil';
import React from 'react';
import type { getClient } from './client';
import type { getClient } from '../gqty/client';
import {
AUTH_CLIENT_CACHE_PROP,
CLIENT_CACHE_PROP,
PageProps,
} from './getProps';
import { HeadlessContext } from './client';
} from '../server/getProps';
import { FaustContext } from '../gqty/client';

/**
* The HeadlessProvider is a React component required to properly facilitate SSR and SSG for Faust.js.
* The FaustProvider is a React component required to properly facilitate SSR and SSG for Faust.js.
*
* @see https://faustjs.org/docs/next/guides/ssr-ssg#rehydration-using-headlessprovider-
* @see https://faustjs.org/docs/next/guides/ssr-ssg#rehydration-using-faustprovider-
*/
export function HeadlessProvider<Props = Record<string, unknown>>({
export function FaustProvider<Props = Record<string, unknown>>({
children,
pageProps,
client,
Expand All @@ -27,8 +27,8 @@ export function HeadlessProvider<Props = Record<string, unknown>>({
useHydrateCache,
auth: { useHydrateCache: useAuthHydrateCache },
} = client;
const cacheSnapshot = pageProps[CLIENT_CACHE_PROP];
const authSnapshot = pageProps[AUTH_CLIENT_CACHE_PROP];
const cacheSnapshot = pageProps?.[CLIENT_CACHE_PROP];
const authSnapshot = pageProps?.[AUTH_CLIENT_CACHE_PROP];

useHydrateCache({
cacheSnapshot: isNil(cacheSnapshot) ? undefined : cacheSnapshot,
Expand All @@ -39,11 +39,11 @@ export function HeadlessProvider<Props = Record<string, unknown>>({
});

return (
<HeadlessContext.Provider
<FaustContext.Provider
value={{
client,
}}>
{children}
</HeadlessContext.Provider>
</FaustContext.Provider>
);
}
1 change: 1 addition & 0 deletions packages/next/src/components/index.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export * from './FaustProvider';
File renamed without changes.
2 changes: 2 additions & 0 deletions packages/next/src/config/index.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
export * from './config';
export * from './withFaust';
File renamed without changes.
1 change: 1 addition & 0 deletions packages/next/src/export/client.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export * from '../gqty';
1 change: 1 addition & 0 deletions packages/next/src/export/components.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export * from '../components';
1 change: 1 addition & 0 deletions packages/next/src/export/config.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export * from '../config';
12 changes: 12 additions & 0 deletions packages/next/src/export/index.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
export { Config, WithFaustConfig, config, withFaust } from '../config';
export { getClient, NextClient } from '../gqty';
export { logQueries } from '../log';
export {
GetNextServerSidePropsConfig,
GetNextStaticPropsConfig,
Is404Config,
getNextServerSideProps,
getNextStaticProps,
is404,
} from '../server';
export { FaustProvider } from '../components';
1 change: 1 addition & 0 deletions packages/next/src/export/log.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export * from '../log';
1 change: 1 addition & 0 deletions packages/next/src/export/server.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export * from '../server';
1 change: 1 addition & 0 deletions packages/next/src/export/utils.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export * from '../utils';
12 changes: 6 additions & 6 deletions packages/next/src/client.ts → packages/next/src/gqty/client.ts
Original file line number Diff line number Diff line change
Expand Up @@ -51,13 +51,13 @@ export interface NextClient<
context: WithClient<IncomingMessage, Schema> | undefined;
}

export interface HeadlessContextType {
export interface FaustContextType {
// eslint-disable-next-line @typescript-eslint/no-explicit-any
client?: NextClient<RequiredSchema>;
}

// eslint-disable-next-line @typescript-eslint/no-explicit-any
export const HeadlessContext = React.createContext<HeadlessContextType>({});
export const FaustContext = React.createContext<FaustContextType>({});

/* eslint-disable @typescript-eslint/ban-types, @typescript-eslint/explicit-module-boundary-types */
export function getClient<
Expand Down Expand Up @@ -100,7 +100,7 @@ export function getClient<
let nextClient: NextClient<Schema, ObjectTypesNames, ObjectTypes>;

function useClient() {
let client: typeof nextClient | undefined = useContext(HeadlessContext)
let client: typeof nextClient | undefined = useContext(FaustContext)
?.client as typeof nextClient;

if (haveServerContext || !isObject(client)) {
Expand All @@ -111,7 +111,7 @@ export function getClient<
}

function useAuthClient() {
let client: typeof nextClient | undefined = useContext(HeadlessContext)
let client: typeof nextClient | undefined = useContext(FaustContext)
?.client as typeof nextClient;

if (haveServerContext || !isObject(client)) {
Expand Down Expand Up @@ -140,7 +140,7 @@ export function getClient<
nextClient.useSubscription = reactClient.useSubscription;
nextClient.useClient = () => {
// eslint-disable-next-line react-hooks/rules-of-hooks
useContext(HeadlessContext);
useContext(FaustContext);
return nextClient;
};

Expand All @@ -152,7 +152,7 @@ export function getClient<
nextClient.auth.useSubscription = authReactClient.useSubscription;
nextClient.auth.useClient = () => {
// eslint-disable-next-line react-hooks/rules-of-hooks
useContext(HeadlessContext);
useContext(FaustContext);
return nextClient.auth;
};

Expand Down
File renamed without changes.
File renamed without changes.
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import type { RequiredSchema } from '@faustjs/react';
import { useRouter } from 'next/router';
import isString from 'lodash/isString';
import defaults from 'lodash/defaults';
import { hasCategoryId, hasCategorySlug } from '../utils';
import { hasCategoryId, hasCategorySlug } from '../../utils';
import type { NextClientHooks } from '.';

export function create<Schema extends RequiredSchema>(
Expand Down
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import type { RequiredSchema } from '@faustjs/react';
import { useRouter } from 'next/router';
import defaults from 'lodash/defaults';
import isString from 'lodash/isString';
import { hasPageId, hasPageUri } from '../utils';
import { hasPageId, hasPageUri } from '../../utils';
import type { NextClientHooks } from '.';

export function create<Schema extends RequiredSchema>(
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import type { RequiredSchema } from '@faustjs/react';
import { useRouter } from 'next/router';
import defaults from 'lodash/defaults';
import isString from 'lodash/isString';
import { hasPostId, hasPostSlug, hasPostUri } from '../utils';
import { hasPostId, hasPostSlug, hasPostUri } from '../../utils';
import type { NextClientHooks } from '.';

export function create<Schema extends RequiredSchema>(
Expand Down
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import type { RequiredSchema } from '@faustjs/react';
import { useRouter } from 'next/router';
import defaults from 'lodash/defaults';
import { hasCategoryId, hasCategorySlug } from '../utils';
import { hasCategoryId, hasCategorySlug } from '../../utils';
import type { NextClientHooks } from '.';

export function create<Schema extends RequiredSchema>(
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import { PageIdType, PostIdType } from '@faustjs/core/client';
import type { RequiredSchema } from '@faustjs/react';
import isUndefined from 'lodash/isUndefined';
import { useRouter } from 'next/router';
import { hasPageId, hasPostId } from '../utils';
import { hasPageId, hasPostId } from '../../utils';
import type { NextClientHooks, NextClientHooksWithAuth } from '.';

export type UsePreviewResponse<Schema extends RequiredSchema> =
Expand Down
File renamed without changes.
File renamed without changes.
2 changes: 2 additions & 0 deletions packages/next/src/gqty/index.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
export * from './client';
export * from './hooks';
7 changes: 0 additions & 7 deletions packages/next/src/index.ts

This file was deleted.

1 change: 1 addition & 0 deletions packages/next/src/log/index.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export * from './log';
2 changes: 1 addition & 1 deletion packages/next/src/log.ts → packages/next/src/log/log.ts
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import type { LoggerOptions } from '@gqty/logger';
import defaults from 'lodash/defaults';
import type { NextClient } from './client';
import type { NextClient } from '../gqty/client';

export async function logQueries(
// eslint-disable-next-line @typescript-eslint/no-explicit-any
Expand Down
Loading

0 comments on commit d15356f

Please sign in to comment.