How to reduce static query code duplication Gatsby JS

Question

I've created a React static query hook that requests site and page level meta data. At the moment I'm duplicating this code on every page build as 1 part of the query changes from page to page allProductsJson, allProductJson etc etc. I was wondering if it is possible to remove this duplication by using the querying capabilities more efficiently? I've read that Gatsby static queries don't support arguments, but maybe there's a way to query all meta and filter by page?

Example of a duplicated query hook:

import { graphql, useStaticQuery } from 'gatsby';
import pageMetadataSelector from 'utils/page-metadata-selector';
import siteMetadataSelector from 'utils/site-metadata-selector';
import getAbsoluteUrl from 'utils/get-absolute-url-path';

const QUERY = graphql`
  {
    pageMetadata: allProductsJson {
      nodes {
        metadata {
          title
          description
          image {
            publicURL
          }
          robots
        }
      }
    }
    site {
      siteMetadata {
        siteUrl
      }
    }
  }
`;

const usePageMetadataQuery = ({ location }) => {
  const { pageMetadata, site } = useStaticQuery(QUERY);
  const pageData = pageMetadataSelector(pageMetadata);
  const { siteUrl } = siteMetadataSelector(site);

  return {
    metadata: {
      ...pageData,
      siteUrl: getAbsoluteUrl(siteUrl, location.pathname),
      image: getAbsoluteUrl(siteUrl, pageData.image.publicURL)
    }
  };
};

export default usePageMetadataQuery;

prepare external gql files, import (gql loader), choose/select by parameter — xadm
– xadm, Commented Sep 7, 2020 at 12:22
github.com/apollographql/graphql-tag#importing-graphql-files ... gatsby specific gatsbyjs.com/plugins/gatsby-plugin-graphql-loader .. but you need it at build time — xadm
– xadm, Commented Sep 7, 2020 at 13:41
@xadm I want to do the query at build time, it doesn't look like this plugin supports that: > This is not for: Loading queries used at build time. — styler
– styler, Commented Sep 7, 2020 at 15:41
yes, I wrote that ... 1st link rather for info or manual config... and more proper plugin for use gatsbyjs.com/plugins/gatsby-plugin-graphql-tag-loader — xadm
– xadm, Commented Sep 7, 2020 at 16:33

coreyward · Accepted Answer · 2020-09-16 14:12:15Z

1

Given what you’re doing here, I think you would be better served by adding the relevant data to the page context in gatsby-node.js (in the createPage call), then using wrapRootElement (in gatsby-browser.js and gatsby-ssr.js) to extract those details from the page context.

From there you can either render the component you need directly or pass it to a React Context Provider for consumption by any children.

Here’s an example showing the latter:

export const wrapPageElement = ({ element, props: { context: { metadata} } }) => {
  return (
    <MetadataContext.Provider value={metadata}>
      {element}
    </MetadataContext.Provider>
  )
}

It’s also possible to fetch this data in each of your page queries and access it in the same way (destructure data instead of context):

exports.createPages = async ({ graphql, actions }) => {
  const {
    data: {
      pageMetadata,
      pageData,
    }
  } = await graphql(`
    {
      pageMetadata: allProductsJson {
        nodes {
          slug
          metadata {
            title
            description
            image {
              publicURL
            }
            robots
          }
        }
      }

      pageData: allPageJson {
        pages: {
          slug
        }
      }
    }
  `

  // for each page
  pageData.pages.map(({ slug }) => {
    // select the metadata with the matching slug
    const { metadata } = pageMetadata.nodes.find(node => node.slug === slug)
    
    // create the page
    actions.createPage({
      path: `/${slug}/`,
      component: `./src/templates/page.jsx`,
      context: { 
        // pass both the slug and metadata as context
        slug,
        metadata,
      }
    })
  })
}

edited Sep 16, 2020 at 14:12

answered Sep 7, 2020 at 17:27

coreyward

80.5k21 gold badges148 silver badges176 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

xadm Over a year ago

question is about using slightly different queries always aliased to pageMetadata and processed the same way

styler Over a year ago

@coreyward the metadata will change from page to page so I could be querying allProductsJson and then allProductJson etc, wondering how I could get this flexibility?

coreyward Over a year ago

Right. Rather than plucking the data you need from allProductJson in the page query or a static query you just do it in gatsby-node.js and pass the relevant slice of it as context to the createPage call.

coreyward Over a year ago

Otherwise you can use page queries, which are run for each page, to fetch this data. Also, you can still grab the location from the props prop passed to wrapPageElement, destructuring it just like I do context in the example above.

styler Over a year ago

@coreyward apologies for coming back to this really late, the part I'm still not sure about is if I add the query to gatsby-node how can I pluck allProductJson then possibly allStoresJson and return that slice as context?

|

Collectives™ on Stack Overflow

How to reduce static query code duplication Gatsby JS

1 Answer 1

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related