Best approach for querying globals when you have a handful of wp-templates?

[kylehotchkiss]

Hello!

I've built quite a few headless Wordpress sites using Next.js and Graphql, but I used raw GraphQL queries where I could concatenate strings and not have to work with the same constraints that Apollo has. I'm a big fan of Faust as it solves a lot of Wordpress template/CPT/routing things I've had to figure out the hard way before and would like to move over to it for future projects.

One thing I'm having a hard time with is global data from GraphQL - there's a handful of things I want to grab from GraphQL for every wp-template/ I have without having to copy that same GraphQL/fragments to every template. I want those things to just be available to my wp-template/s. Some examples of global things I use are menus, redirection plugin, general settings, and global SEO via yoast.

I was able to hack together a plugin that works with the seedQueryDocumentNote filter that accomplishes this:

import { gql, DocumentNode } from '@apollo/client';
import { FaustHooks, FaustPlugin } from '@faustwp/core';
import Header from '@/components/header';
import Footer from '@/components/footer';

export class Globals implements FaustPlugin {
  constructor() {}

  apply(hooks: FaustHooks) {
    hooks.addFilter(
      'seedQueryDocumentNode',
      'faust',
      (seedQuery: any, data) => {
        const globalsQuery: any = gql`
          ${Header.fragments.menu}
          ${Footer.fragments.content}
          query Globals {
            redirection {
              redirects {
                (redirect things etc)
              }
            }

            menuPrimary: menu(idType: LOCATION, id: "primary") {
              (A menu, I used a fragment here)
            }

            acfOptionsThemeSettings {
              (things from ACF Theme settings/options)
            }

            generalSettings {
              (things from WP Settings)
            }
        }`;

        // Grab pieces of the GraplQL AST to operate against
        const globalQueryFragments = globalsQuery.definitions.filter((defination: any) => defination.kind === 'FragmentDefinition');
        const globalQueryOperation = globalsQuery.definitions.find((defination: any) => defination.kind === 'OperationDefinition');
        const seedQueryOperationIndex = seedQuery.definitions.findIndex((defination: any) => defination.kind === 'OperationDefinition');

        // Merge operations (SeedQuery plus Globals)
        if ( seedQueryOperationIndex > -1 && globalQueryOperation ) {
          seedQuery.definitions[seedQueryOperationIndex].selectionSet.selections = [
            ...seedQuery.definitions[seedQueryOperationIndex].selectionSet.selections,
            ...globalQueryOperation.selectionSet.selections
          ];
        }

        // Append unique fragments from Globals to SeedQuery
        for ( const fragment of globalQueryFragments ) {
          const existingFragment = seedQuery.definitions.find((defination: any) => defination.kind === 'FragmentDefinition' && defination.name.value === fragment.name.value);

          if ( !existingFragment ) {
            seedQuery.definitions.push(fragment);
          }
        }

        return seedQuery;
      }
    );
  }
}

As you can see, I'm hacking together the GraphQL ASTs quite a bit which accomplishes the task but is fragile. I'd also love to be able to create one plugin for menus, one for redirection, one for SEO so that they're more modular and I can copy them across projects more easily.

So my question is:

1. is there a better Faust-blessed way of adding global graphql queries to a project and propagating the data to wp-templates?
2. is there a way I could do this with plugins, and using one plugin for each piece of global data I want to fetch (example: redirects, seo, menus)

Thanks in advance for any thoughts you may be able to contribute!

[theodesp]

Hey @kylehotchkiss thanks for the quest. Fragments are just pieces of reusable GraphQL elements that you can include in your queries when needed. The current wp-templates system tries to promote having a single query per page so that all the data that the template needs are available from that fetch request. We might need to consider supporting multiple queries per template as mentioned in this issue, but for now we only offer the seedQueryDocumentNode hook to offload most of the common requests there.

[theodesp]

I mean you could also try different techniques to define and load graphql queries or queries. For example you can load them as files instead of concatenating the fragment strings together, as long as it is fairly maintenable for you:

https://www.apollographql.com/docs/react/integrations/webpack/