James Peters, Thanks for reading the article and asking. Are you using the Netlify Function to load the product or directly from gatsby? If it is from gatsby directly, we can use something like Apollo Client for React to fetch it. This will also help you in syncing the UI when data changed in the backend.

If you are connecting to a DB through netlify functions, there also we can query using GraphQL. I have a few examples here,

blog.greenroots.info/how-to-build-a-serverless-ap…

Hope I understood your question and my response helps you!

Tapas Adhikary, thanks for the fast reply! I'm loading the products directly from Gatsby graphql by using the gatsby-source-contentful plugin.

So if I understood correctly, I will have to use Apollo Client inside the checkout function to query Contentful and get the inventory?

James Peters, It depends on where and when do you want to fetch the product list. But you can actually do the same in both components of losing and checkout using the react-appolo library as you are calling it directly from GraphQL.

These steps may be helpful,

• First define the GraphQL query. Here is an example of fetching tags,

const ALL_TAGS = gql`
  query {
    allTags {
      data {
        _id
        name
        description
      }
    }
  }
`

• Then use the useQuery hook from the apollo react lib.

const { loading: tagLoading, data: tagData } = useQuery(ALL_TAGS)

• Now you can use the tagData and that has the fetched data.

Note, the lib has the hooks for both fetching and mutating data,

import { useQuery, useMutation } from "@apollo/react-hooks"