Skip to main content

Apollo

Using Apollo in Faust

Faust.js uses @apollo/client under the hood for its GraphQL client.

You can use the client as usual in your components and pages. Take the following example:

Your app queries the title and description from generalSettings:

Your App
import { gql, useQuery } from '@apollo/client';

export default function Page(props) {
const { data } = useQuery(Page.query);
const { title, description } = data.generalSettings;
return(
<h1>{title}</h1>
<p>{description}</p>
)
}

Page.query = gql`
query {
generalSettings {
title
description
}
}
`

It co-locates the GraphQL query within the same file. You can also import and use queries from a file.

The benefit with Faust is that you don't have to create the client object in your codebase. It is automatically created when you first import the @faustwp-core package. Instead you can customize it by using a plugin filter.

Generating Possible types JSON

Apollo Client v3 requires you to provide a possibleTypes object that maps interfaces to all their possible types. With Faust, we provide a cli command you can use on your package.json scripts that generates this file for you. Just make sure to enable WPGraphQL introspection before you run it.

package.json
{
"scripts": {
...
"generate": "faust generatePossibleTypes",
}
}

Running the command will create the following file: possibleTypes.json. You can commit this file to your version control system. Now make sure you import this file to the faust.config.js:

faust.config.js
import { setConfig } from '@faustwp/core';
import templates from './wp-templates';
import possibleTypes from './possibleTypes.json';

/**
* @type {import('@faustwp/core').FaustConfig}
**/
export default setConfig({
templates,
experimentalPlugins: [],
possibleTypes,
});

You don't have to run the command each time you build the application, but only when you update something in the schema (by adding a new CPT for example).

Further Reading

We recommend reading the queries and fragments docs to get a better picture of how the Apollo Client works.

Additionally, the following docs may be helpful: