How to get additional (custom) information from Shopify using Storefront API?

[heytulsiprasad]

Thanks a lot for this project, it helped a lot in clearing my initial issues with setting up the platform.

However, in my particular use case I need each product to have some custom fields which I want to access via the storefront api in Gatsby. (Not to be confused with options/variants).

For example: Let's say I'm selling some gadgets and I want to share a pdf manual with the user for each one of my products, then I'll need to access the link to pdf manual from the storefront as well.

So how does one create/fetch custom information like this?

Research

I found a app on Shopify named, Custom fields which sends over your custom fields as meta information but that doesn't show up by default on the gatsby graphiql interface. So I'm stuck as of how to get that data in the build time?

[AlexanderProd]

Hey Tulsi,

Im glad my starter is of help for you. I think the best option for you would be to create individual pages for each product using gatsby-node.js file.

For example like this:

const path = require('path')
const { existsSync } = require('fs')

exports.createPages = async ({ graphql, actions }) => {
  const { createPage } = actions

  const productsQuery = await graphql(`
    {
      allShopifyProduct {
        edges {
          node {
            handle
          }
        }
      }
    }
  `)

  productsQuery.data.allShopifyProduct.edges.forEach(({ node }) => {
    componentPath = existsSync(`./src/templates/Products/${node.handle}.js`)
      ? `./src/templates/Products/${node.handle}.js`
      : './src/templates/comming-soon.js'

    createPage({
      path: `/produkt/${node.handle}/`,
      component: path.resolve(componentPath),
      context: {
        // Data passed to context is available
        // in page queries as GraphQL variables.
        handle: node.handle,
      },
    })
  })
}

Then in each individual product file you can make additional custom graphql queries.

[heytulsiprasad]

Hey Alex, thank you for responding.

Yes, I've created individual pages for products this way. And query the storefront data from each page like this:

export const query = graphql`
  query($handle: String!) {
    shopifyProduct(handle: { eq: $handle }) {
      id
      title
      tags
      handle
      productType
      shopifyId
      description
      descriptionHtml
      images {
        originalSrc
        localFile {
          name
        }
      }
      variants {
        title
        shopifyId
        availableForSale
        id
        selectedOptions {
          value
          name
        }
        priceV2 {
          amount
          currencyCode
        }
      }
    }
  }
`

But when I use the Custom fields app to create additional fields it says it stores the data in Metafields. I don't know how to access it from the storefront API at the build time.

[AlexanderProd]

Unfortunately I can’t help you there since I haven’t used the Custom fields app myself yet.

[heytulsiprasad]

No issues, let's see how it goes. 👍

Again, thanks for this project. :)