How to store results of a GraphQL query from Contentful?

Question

Learning more of what I can do with Gatsby I ran across an article "Building an eCommerce site with Gatsby, Contentful and Snipcart" which got me started in building an eCommerce site for fun with Contentful.

I've built my Gatsby site and added the needed plugins using the Delivery API:

plugins: [
    `gatsby-plugin-image`,
    `gatsby-plugin-sharp`,
    `gatsby-transformer-sharp`,
    {
      resolve: `gatsby-source-contentful`,
      downloadLocal: true,
      options: {
        spaceId: process.env.CONTENTFUL_SPACE_ID,
        accessToken: process.env.CONTENTFUL_DELIVERY_API,
      },
    },
  ],

I'm able to pull my page data with my page component:

import React from 'react'
import { graphql } from 'gatsby'
import PropTypes from 'prop-types'

// Components
import Layout from '../components/Layout'

const TestPage = ({ location, data }) => {
  return (
    <>
      <Layout location={location} title="Testing">
        <pre>{JSON.stringify(data, null, 4)}</pre>
      </Layout>
    </>
  )
}

TestPage.propTypes = {
  location: PropTypes.object.isRequired,
  data: PropTypes.object.isRequired,
}

export default TestPage

export const query = graphql`
  {
    allContentfulTest {
      edges {
        node {
          id
          slug
          price
          title
          color
          size
          previewImage {
            gatsbyImageData(layout: FULL_WIDTH, placeholder: BLURRED, formats: WEBP)
          }
        }
      }
    }
  }
`

What I'm unable to find an answer to is how to better optimize my site.

For example, if I have a product category page of several items I will need to retrieve every parameter on the initial query so it could be filtered through without building a complex query for it, which I would imagine would be a query strain.

My thinking of a usage example:

- initial query of above code
- filtering options saved to localstorage
- user wants to only see results of color: red

instead of building a new query of:

export const query = graphql`
  {
    allContentfulTest(filter: {color: {eq: "red"}}) {
      edges {
        node {
          id
          slug
          price
          title
          color
          size
          previewImage {
            gatsbyImageData(layout: FULL_WIDTH, placeholder: NONE, formats: WEBP)
          }
        }
      }
    }
  }
`

What I believe is that if my page query gets everything I need for:

filtering
rendered page
individual item

How can I store this data effectively without so many queries. This led me to research more on Redux, localstorage and the Context API and I've read through:

However none of which mention or discuss on GraphQL. If my data, at minimum were to change every 24 hours, how should I preserve a GraphQL query to be used across the page with filtering and product item template (query which would be in gatsby-node.js) so I wouldn't need multiple queries of the same data?

To clarify I do know that localstorage has no time constraint and would be adding a unix timestamp.

How to store results of a GraphQL query from Contentful?

0 Answers0