HomeContact
Gatsby
Common Gatsby Shopify Error Encounter During Development
August 25, 2021
1 min
  1. Gatsby shopify plugin issue.
  2. Gatsby Shopify token authorization issue
  3. Your plugins must export known APIs from their gatsby-node.js
  4. Cannot read property ‘checkoutLineItemsAdd’ of undefined
  5. JS file in localhost not loading after upgrading to MacOS 10.15 and latest chrome

Gatsby shopify plugin issue.

when I use the gatsby-source-shopify in gatsby-config, it come up with this error. but the site still ran

error an error occurred while sourcing data
query:
  """

      query GetPages($first: Int!, $after: String) {
        pages(first: $first, after: $after) {
          pageInfo {
            hasNextPage
          }
          edges {
            cursor
            node {
              id
              handle
              title
              body
              bodySummary
              updatedAt
              url
            }
          }
        }
      }

  """
variables:
  first: 250
  after: null

the error is not obvious, but I forgot to put in my shopify store name in gatsby-config.js

{
      resolve: "gatsby-source-shopify",
      options: {
        shopName: "selftaught-store",
        accessToken: "Store Front",
        verbose: true,
        paginationSize: 250,
      },
    },

If you find my tips are useful, please support my work :)


Gatsby Shopify token authorization issue

After the fix with the last issue, I come across this error

Check your token has this read authorization,
      or omit fetching this object using the "includeCollections" options in gatsby-source-shopify plugin options

I have forgotten to tick these 2 boxes in my shopify storefront api private app

  • Read product tags
  • Read customer tags

If you find my tips are useful, please support my work :)


Your plugins must export known APIs from their gatsby-node.js.

small mistake I made with spelling,

- Your local gatsby-node.js is using the API "createPage" which is not a known API.

in gatsby-node.js

original code
exports.createPage = async ({ graphql, actions: { createPage } }) => {}

I should spell createPages instead

working code
exports.createPages = async ({ graphql, actions: { createPage } }) => {}

If you find my tips are useful, please support my work :)


Cannot read property ‘checkoutLineItemsAdd’ of undefined

When I try to add an item to cart, it come out with this error message

Cannot read property 'checkoutLineItemsAdd' of undefined

during the debug process, I found that I have connected to the Shopify Client but when I create my add to cart function

const addToCart = async variantId => {
    const newCheckout = client.checkout.create()
    ...
    ...
}

I used async, but I forgot to put await in newCheckout

the correct code should be

const addToCart = async variantId => {
    const newCheckout = await client.checkout.create()
    ...
    ...
}

If you find my tips are useful, please support my work :)


JS file in localhost not loading after upgrading to MacOS 10.15 and latest chrome

When I upgraded to latest OS Catalina and latest chrome, all my javascript file is not loading through https anymore. and it wouldnt allow me to allow the certificate.

go to chrome. chrome://flags/#allow-insecure-localhost Allow invalid certificates for resources loaded from localhost. -> pick enabled.

This will solve the problem.

If you find my tips are useful, please support my work :)



Tags

#Gatsby#Shopify

Related Posts

Gatsby Learning Tips
August 17, 2021
2 min
© 2021, All Rights Reserved.

Quick Links

Advertise with usAbout UsContact Us