apollo.mdx

slug	title	description
apollo	Apollo	Perform declarative queries with Apollo to manipulate and structure data

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:

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.

Using Persisted Queries

Faust has built in support for persisted queries with Apollo Client as of 0.3.0. This is helpful for tools like WPGraphQL Smart Cache, which caches your WPGraphQL requests and automatically evicts those cached requests when the data changes.

To enable persisted queries in your Faust app, you can add the following property to your 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,
  usePersistedQueries: true,
});

Changing the Desired HTTP Method for Your GraphQL Requests

Since Faust 0.3.0, GraphQL requests are made using the GET HTTP method. Since most hosting providers cache GET requests, this will help keep your WordPress instance below capacity. However, there are some instances where you may want Apollo to use the POST HTTP method for GraphQL requests:

• You are receiving stale data
• Your GraphQL queries are too long to be stringified into a URL (this length is determined by your hosting provider)

If you want Faust to use POST requests instead of GET requests, you can set the following property in your 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,
  useGETForQueries: false,
});

Making One-Off POST/GET Requests

If you want to execute a GraphQL request with a different method than the default behavior on a one-off basis, you can modify the fetchOptions in the Apollo useQuery hook to specify your desired method:

const { data, loading, error } = useQuery(MY_QUERY, {
  context: {
    fetchOptions: {
      method: 'POST',
    },
  },
});

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.

{
  "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:

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:

• Mutations
• Refetching
• Best practices