diff --git a/.changeset/twenty-weeks-kiss.md b/.changeset/twenty-weeks-kiss.md new file mode 100644 index 000000000..2981aadb1 --- /dev/null +++ b/.changeset/twenty-weeks-kiss.md @@ -0,0 +1,5 @@ +--- +'@faustjs/next': minor +--- + +**BREAKING**: Rename `HeadlessProvider` to `FaustProvider` diff --git a/docs/next/guides/fetching-data.mdx b/docs/next/guides/fetching-data.mdx index e5be4e9ed..3798b436d 100644 --- a/docs/next/guides/fetching-data.mdx +++ b/docs/next/guides/fetching-data.mdx @@ -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 ( <> - + - + ); } diff --git a/docs/next/guides/post-page-previews.mdx b/docs/next/guides/post-page-previews.mdx index fd9843967..ceb319401 100644 --- a/docs/next/guides/post-page-previews.mdx +++ b/docs/next/guides/post-page-previews.mdx @@ -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 ( <> - + - + ); } diff --git a/docs/next/guides/ssr-ssg.mdx b/docs/next/guides/ssr-ssg.mdx index 1812c0f18..12add812a 100644 --- a/docs/next/guides/ssr-ssg.mdx +++ b/docs/next/guides/ssr-ssg.mdx @@ -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 `` +## Rehydration Using `` -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 `` to your `_app.tsx` +### Adding `` 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 ( <> - + - + ); } diff --git a/docs/tutorial/setup-faustjs.mdx b/docs/tutorial/setup-faustjs.mdx index 61edf09de..8b0c91c71 100644 --- a/docs/tutorial/setup-faustjs.mdx +++ b/docs/tutorial/setup-faustjs.mdx @@ -211,9 +211,9 @@ npm run generate The `generate` script will create a `client/schema.generated.ts` file upon completion. -### Implement the `` Component +### Implement the `` Component -The `` 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 `` 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: @@ -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 ( - + - + ); } diff --git a/examples/next/getting-started/src/pages/_app.tsx b/examples/next/getting-started/src/pages/_app.tsx index d9b65f1f5..cbbf71a6f 100644 --- a/examples/next/getting-started/src/pages/_app.tsx +++ b/examples/next/getting-started/src/pages/_app.tsx @@ -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'; @@ -9,9 +9,9 @@ import type { AppProps } from 'next/app'; export default function MyApp({ Component, pageProps }: AppProps) { return ( <> - + - + ); } diff --git a/packages/next/src/components/HeadlessProvider.tsx b/packages/next/src/components/FaustProvider.tsx similarity index 75% rename from packages/next/src/components/HeadlessProvider.tsx rename to packages/next/src/components/FaustProvider.tsx index d22acefcc..25f9eb42e 100644 --- a/packages/next/src/components/HeadlessProvider.tsx +++ b/packages/next/src/components/FaustProvider.tsx @@ -6,14 +6,14 @@ import { CLIENT_CACHE_PROP, PageProps, } from '../server/getProps'; -import { HeadlessContext } from '../gqty/client'; +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>({ +export function FaustProvider>({ children, pageProps, client, @@ -39,11 +39,11 @@ export function HeadlessProvider>({ }); return ( - {children} - + ); } diff --git a/packages/next/src/components/index.ts b/packages/next/src/components/index.ts index 6c116cb1f..4f7e660c4 100644 --- a/packages/next/src/components/index.ts +++ b/packages/next/src/components/index.ts @@ -1 +1 @@ -export * from './HeadlessProvider'; +export * from './FaustProvider'; diff --git a/packages/next/src/export/index.ts b/packages/next/src/export/index.ts index 46279239e..56d4cc90a 100644 --- a/packages/next/src/export/index.ts +++ b/packages/next/src/export/index.ts @@ -9,4 +9,4 @@ export { getNextStaticProps, is404, } from '../server'; -export { HeadlessProvider } from '../components'; +export { FaustProvider } from '../components'; diff --git a/packages/next/src/gqty/client.ts b/packages/next/src/gqty/client.ts index 23872691b..c0878d780 100644 --- a/packages/next/src/gqty/client.ts +++ b/packages/next/src/gqty/client.ts @@ -51,13 +51,13 @@ export interface NextClient< context: WithClient | undefined; } -export interface HeadlessContextType { +export interface FaustContextType { // eslint-disable-next-line @typescript-eslint/no-explicit-any client?: NextClient; } // eslint-disable-next-line @typescript-eslint/no-explicit-any -export const HeadlessContext = React.createContext({}); +export const FaustContext = React.createContext({}); /* eslint-disable @typescript-eslint/ban-types, @typescript-eslint/explicit-module-boundary-types */ export function getClient< @@ -100,7 +100,7 @@ export function getClient< let nextClient: NextClient; function useClient() { - let client: typeof nextClient | undefined = useContext(HeadlessContext) + let client: typeof nextClient | undefined = useContext(FaustContext) ?.client as typeof nextClient; if (haveServerContext || !isObject(client)) { @@ -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)) { @@ -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; }; @@ -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; }; diff --git a/packages/next/src/server/getProps.tsx b/packages/next/src/server/getProps.tsx index a02f7de08..c73fe3412 100644 --- a/packages/next/src/server/getProps.tsx +++ b/packages/next/src/server/getProps.tsx @@ -13,7 +13,7 @@ import { RouterContext } from 'next/dist/shared/lib/router-context'; import React, { FunctionComponent, ComponentClass } from 'react'; import { config } from '../config/config'; -import { getClient, HeadlessContext } from '../gqty/client'; +import { getClient, FaustContext } from '../gqty/client'; import { hasCategoryId, @@ -79,10 +79,10 @@ export async function getProps< - + {/* eslint-disable-next-line react/jsx-props-no-spreading */} - + , ); diff --git a/packages/next/test/withFaust.test.ts b/packages/next/test/withFaust.test.ts index 7af14d849..463d69548 100644 --- a/packages/next/test/withFaust.test.ts +++ b/packages/next/test/withFaust.test.ts @@ -1,4 +1,4 @@ -import { createRedirects, withFaust } from '../src/withFaust'; +import { createRedirects, withFaust } from '../src/config/withFaust'; describe('withFaust', () => { test('withFaust merges default config with user specified config', async () => {