Skip to main content

Using FaustProvider

tip

This doc assumes you're storing your pages/styles/etc. in a directory called src, and you have the baseUrl option set to src in your tsconfig.json for importing modules from the root.

The <FaustProvider> component is a React component that follows the provider pattern, wrapping your Next.js app to provide the necessary context to Faust.js. This includes:

  • React Context for state management
  • GraphQL query cache
  • Necessary context for usage with Faust.js hooks

Props​

The <FaustProvider> React component requires the following props:

Usage​

The <FaustProvider> should be called in your application's _app.tsx file. This file may live in either src/pages/_app.tsx or pages/_app.tsx depending on how you've setup your project. If your project doesn't yet have this file, you can use this as the default _app.tsx file:

_app.tsx
import type { AppProps } from 'next/app';

export default function MyApp({ Component, pageProps }: AppProps) {
return (
<Component {...pageProps} />
);
}

With your _app.tsx file created, you can now import the <FaustProvider> component and wrap your app with it. The <FaustProvider> component should wrap everything in the return statement. You'll also need to import the client, as it is a required prop of the <FaustProvider>:

_app.tsx
import { FaustProvider } from '@faustjs/next';
import { client } from 'client';
import type { AppProps } from 'next/app';

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

Finally, we will import the Faust.js config at the top of the _app.tsx file to give our Faust.js app access to the config:

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

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

With the above in place, your app is now ready to properly use Faust.js.