gatsbyjs / gatsby

The best React-based framework with performance, scalability and security built in.
https://www.gatsbyjs.com
MIT License
55.27k stars 10.31k forks source link

Can not fetch ShopifyCollection using gatsby-source-shopify plugin. Getting Error #35058

Closed devzakir closed 2 years ago

devzakir commented 2 years ago

Preliminary Checks

Description

I am trying to pull the collections list from shopify using gatsby-source-shopify plugin. I have checked the permission, it was all good. Don't know why I am getting this.

Screenshot & error details attached below!

"message": "Cannot query field \"allShopifyCollection\" on type \"Query\". Did you mean \"allShopifyProduct\" or \"allShopifyProductImage\"?",
      "locations": [
        {
          "line": 2,
          "column": 2
        }
      ],

image

Reproduction Link

https://github.com/devzakir/gatsby-shopify-graphql

Steps to Reproduce

  1. clone the repo

  2. install packages

  3. add shopify keys in the env file

    GATSBY_SHOPIFY_PASSWORD=
    GATSBY_SHOPIFY_STORE_URL=
    GATSBY_STOREFRONT_ACCESS_TOKEN
  4. Visit the graphql page http://localhost:8000/___graphql

  5. Execute the query

{ allShopifyCollection (sort: { fields: [title] }) { edges { node { id title handle products { title images { originalSrc } shopifyId handle description availableForSale priceRange { maxVariantPrice { amount } minVariantPrice { amount } } } } } } }


### Expected Result

I was expected get the response from the query. 

### Actual Result

{ "errors": [ { "message": "Cannot query field \"allShopifyCollection\" on type \"Query\". Did you mean \"allShopifyProduct\" or \"allShopifyProductImage\"?", "locations": [ { "line": 2, "column": 2 } ], "extensions": { "stack": [ "GraphQLError: Cannot query field \"allShopifyCollection\" on type \"Query\". Did you mean \"allShopifyProduct\" or \"allShopifyProductImage\"?", " at Object.Field (/Users/devzakir/Dev/clients/Fiverr/nuformat-gatsby/node_modules/graphql/validation/rules/FieldsOnCorrectTypeRule.js:48:31)", " at Object.enter (/Users/devzakir/Dev/clients/Fiverr/nuformat-gatsby/node_modules/graphql/language/visitor.js:323:29)", " at Object.enter (/Users/devzakir/Dev/clients/Fiverr/nuformat-gatsby/node_modules/graphql/utilities/TypeInfo.js:370:25)", " at visit (/Users/devzakir/Dev/clients/Fiverr/nuformat-gatsby/node_modules/graphql/language/visitor.js:243:26)", " at validate (/Users/devzakir/Dev/clients/Fiverr/nuformat-gatsby/node_modules/graphql/validation/validate.js:69:24)", " at graphqlMiddleware (/Users/devzakir/Dev/clients/Fiverr/nuformat-gatsby/node_modules/express-graphql/index.js:98:38)", " at runMicrotasks ()", " at processTicksAndRejections (internal/process/task_queues.js:95:5)" ] } } ] }


### Environment

```shell
System:
    OS: macOS 12.0.1
    CPU: (8) arm64 Apple M1
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 14.17.5 - /opt/homebrew/opt/node@14/bin/node
    Yarn: 1.22.10 - /usr/local/bin/yarn
    npm: 6.14.14 - /opt/homebrew/opt/node@14/bin/npm
  Languages:
    Python: 2.7.18 - /usr/bin/python
  Browsers:
    Chrome: 98.0.4758.109
    Edge: 98.0.1108.62
    Safari: 15.1
  npmPackages:
    gatsby: ^4.8.0 => 4.8.1
    gatsby-plugin-gatsby-cloud: ^4.8.0 => 4.8.1
    gatsby-plugin-image: ^2.8.0 => 2.8.1
    gatsby-plugin-manifest: ^4.8.0 => 4.8.1
    gatsby-plugin-offline: ^5.8.0 => 5.8.1
    gatsby-plugin-react-helmet: ^5.8.0 => 5.8.0
    gatsby-plugin-sass: ^5.8.0 => 5.8.0
    gatsby-plugin-sharp: ^4.8.0 => 4.8.1
    gatsby-source-filesystem: ^4.8.0 => 4.8.1
    gatsby-source-shopify: ^6.9.0 => 6.9.0
    gatsby-transformer-sharp: ^4.8.0 => 4.8.0
  npmGlobalPackages:
    gatsby-cli: 4.9.0

Config Flags

require('dotenv').config()

module.exports = {
  siteMetadata: {
    title: `Gatsby Default Starter`,
    description: `Kick off your next, great Gatsby project with this default starter. This barebones starter ships with the main Gatsby configuration files you might need.`,
    author: `@gatsbyjs`,
    siteUrl: `https://gatsbystarterdefaultsource.gatsbyjs.io/`,
  },
  plugins: [
    `gatsby-plugin-react-helmet`,
    `gatsby-transformer-sharp`,
    `gatsby-plugin-sharp`,
    {
      resolve: `gatsby-plugin-sass`,
      options: {
        postCssPlugins: [
          require("tailwindcss"),
          require("./tailwind.config.js"), // Optional: Load custom Tailwind CSS configuration
        ],
      },
    },
    {
      resolve: 'gatsby-source-shopify',
      options: {
        storeUrl: process.env.GATSBY_SHOPIFY_STORE_URL,
        password: process.env.GATSBY_SHOPIFY_PASSWORD,
      }
    },
    `gatsby-plugin-image`,
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `images`,
        path: `${__dirname}/src/images`,
      },
    },
    {
      resolve: `gatsby-plugin-manifest`,
      options: {
        name: `gatsby-starter-default`,
        short_name: `starter`,
        start_url: `/`,
        background_color: `#663399`,
        // This will impact how browsers show your PWA/website
        // https://css-tricks.com/meta-theme-color-and-trickery/
        // theme_color: `#663399`,
        display: `minimal-ui`,
        icon: `src/images/gatsby-icon.png`, // This path is relative to the root of the site.
      },
    },
    // this (optional) plugin enables Progressive Web App + Offline functionality
    // To learn more, visit: https://gatsby.dev/offline
    // `gatsby-plugin-offline`,
  ],
}
devzakir commented 2 years ago

Sorry about this mess! I am new to Gatsby & shopify. I forgot to add collections in the plugin options

{
      resolve: "gatsby-source-shopify",
      options: {
        password: process.env.SHOPIFY_SHOP_PASSWORD,
        storeUrl: process.env.GATSBY_SHOPIFY_STORE_URL,
        shopifyConnections: ["collections"],
      },
    },