[gatsby-source-wordpress] Reduce build time ⚙️ and move graphql query to client side

[franciscocobas]

Hello community! First of all, thank you for all your help with tons of information here in Github 😃🙌🏼

I have a pretty big application with more the 10k posts on the Wordpress backend and my goal is to reduce the build time.

Some pages of the app are less visited than others, so I was thinking on get rid of some queries that run at build time and move them to the client and add some spinner while the data is loading.

So, my page query (currently running at build time) is the following:

export const pageQuery = graphql`
  query AllElMenuDelDiaPost($skip: Int!, $limit: Int!) {
    allWpPost(
      filter: {
        categories: {
          nodes: { elemMatch: { slug: { eq: "todays-menu" } } }
        }
      }
      sort: { fields: date, order: DESC }
      limit: $limit
      skip: $skip
    ) {
      nodes {
        id
        title
        date(locale: "en")
        slug
        categories {
          nodes {
            name
            slug
            parentId
          }
        }
      }
    }
  }
`;

I'm not wrong I can achieve this using @apollo/client. If you guys look at the example in Github and they show the following query that runs on the client side:

import { useQuery, gql } from '@apollo/client';
// This query is executed at run time by Apollo.
const APOLLO_QUERY = gql`
{
  meme(where: { id: "cjke2xlf9nhd90953khilyzja" }) {
    photo {
      url(
        transformation: {
          image: { resize: { width: 600, height: 600, fit: crop } }
        }
      )
    }
  }
}
`;

My final question is:

How can I write my build time graphql query to a client side gql query?

As you can see in the graphql query I'm interested in getting only the posts with "todays-menu" category.

Thank you for your help 🥰

[TylerBarnes]

Hey @franciscocobas , I think you're looking for something like this:

{
  posts(where: {categoryIn: ["todays-menu"], orderby: {field: DATE, order: DESC}) {
    nodes {
      title
    }
  }
}

I recommend downloading a GraphQL client to use to explore the WPGraphQL schema outside of Gatsby. That will help you build queries like this on your own. If you install the Graphiql app, you can explore the schema by pressing shift+space to get a dropdown of available fields and arguments for the spot where your cursor is in the query.