GraphQL api conflict?

[OllieJT]

I am already using the gatsby-source-graphql plugin with Shopify. It seems to have an issue with the page creation conflict, but I'm already a little lost trying to understand the root of the problem.

Enabling gatsby-source-graphql results in the error below. Disabling it completes the build just fine.

error Plugin gatsby-source-graphql returned an error

  Error: The plugin "gatsby-source-graphql" created a node of a type owned by another plugin.
          The node type "GraphQLSource" is owned by "gatsby-source-prismic-graphql".
          If you copy and pasted code from elsewhere, you'll need to pick a new type name
          for your new node(s).
          The node object passed to "createNode":
          {
      "id": "70a87664-0538-5739-87f6-ec3b13239436",
      "typeName": "Shopify",
      "fieldName": "shopify",
      "parent": null,
      "children": [],
      "internal": {
          "type": "GraphQLSource",
          "contentDigest": "2b604d8d767435561bfb1249116b468d",
          "ignoreType": true,
          "owner": "gatsby-source-graphql"
      }
  }
          The plugin creating the node:
          {
      "resolve": "/Users/olliejt/Documents/GitHub/VBI/gatsby-starter-shopifypwa/node_modules/gatsby-source-graphql",
      "id": "b9f70474-1178-5378-9955-dbbd3d4b9314",
      "name": "gatsby-source-graphql",
      "version": "2.0.18",
      "pluginOptions": {
          "plugins": [],
          "typeName": "Shopify",
          "fieldName": "shopify",
          "url": "https://visuals-by-impulse.myshopify.com/api/graphql",
          "headers": {
              "X-Shopify-Storefront-Access-Token": "REMOVED-TOKEN"
          }
      },
      "nodeAPIs": [
          "sourceNodes"
      ],
      "browserAPIs": [],
      "ssrAPIs": [],
      "pluginFilepath": "/Users/olliejt/Documents/GitHub/VBI/gatsby-starter-shopifypwa/node_modules/gatsby-source-graphql"
  }

  - actions.js:542 actions.createNode
    [gatsby-starter-shopifypwa]/[gatsby]/dist/redux/actions.js:542:148

  - redux.js:468
    [gatsby-starter-shopifypwa]/[redux]/lib/redux.js:468:35

  - api-runner-node.js:63 doubleBoundActionCreators.(anonymous function).args
    [gatsby-starter-shopifypwa]/[gatsby]/dist/utils/api-runner-node.js:63:13

  - gatsby-node.js:97 Object.<anonymous>
    [gatsby-starter-shopifypwa]/[gatsby-source-graphql]/gatsby-node.js:97:5

  - Generator.next

warning The gatsby-source-graphql plugin has generated no Gatsby nodes. Do you need it?

[birkir]

Can you share some versions you have? Like gatsby and shopify plugin etc.

It looks like conflicting versions of the graphql package. Can you give me the results of this command from your project root:

find . | grep /gatsby-source-graphql/package.json

Try add this into your package.json

"resolutions": {
  "gatsby-source-graphql": "2.0.18",
}

[OllieJT]

Thanks for the fast reply @birkir I added the resolutions as suggested. Then (in order) ran... rm -rf node_modules npm i gatsby clean gatsby develop Unfortunately still received the same error.

The command you gave linked to my package.json file. I'm assuming gatsby info will be more helpful?

  System:
    OS: macOS 10.14.3
    CPU: (8) x64 Intel(R) Core(TM) i7-7920HQ CPU @ 3.10GHz
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 10.15.3 - /usr/local/bin/node
    Yarn: 1.15.2 - ~/.yarn/bin/yarn
    npm: 6.9.0 - /usr/local/bin/npm
  Languages:
    Python: 2.7.10 - /usr/bin/python
  Browsers:
    Chrome: 73.0.3683.103
    Safari: 12.0.3
  npmPackages:
    gatsby: ^2.3.27 => 2.3.27
    gatsby-plugin-apollo-shopify: ^1.0.2 => 1.0.2
    gatsby-plugin-layout: ^1.0.14 => 1.0.14
    gatsby-plugin-manifest: ^2.0.29 => 2.0.29
    gatsby-plugin-netlify: ^2.0.15 => 2.0.15
    gatsby-plugin-netlify-cache: ^1.2.0-beta.0 => 1.2.0-beta.0
    gatsby-plugin-offline: ^2.0.25 => 2.0.25
    gatsby-plugin-prefetch-google-fonts: ^1.4.2 => 1.4.2
    gatsby-plugin-react-helmet: ^3.0.12 => 3.0.12
    gatsby-plugin-sitemap: ^2.0.12 => 2.0.12
    gatsby-plugin-styled-components: ^3.0.7 => 3.0.7
    gatsby-remark-prettier: ^1.0.0 => 1.0.0
    gatsby-source-filesystem: ^2.0.31 => 2.0.31
    gatsby-source-graphql: ^2.0.18 => 2.0.18
    gatsby-source-prismic-graphql: ^3.0.6 => 3.0.6
    gatsby-transformer-json: ^2.1.11 => 2.1.11
  npmGlobalPackages:
    gatsby-cli: 2.5.4

[birkir]

Okay. Looks like multiple packages cannot use gatsby-source-graphql

https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby-source-graphql/src/gatsby-node.js#L137

I will look into this. But for clarity, can you share your gatsby-config.js (you can strip out secrets)

Thank you

[OllieJT]

Alrighty, that's unfortunate!

I'm also a lil stupid and misunderstood the command you gave. Do you still need the contents of /gatsby-source-graphql/package.json? @birkir

My gatsby-config.js

require('dotenv').config({
  path: `.env.${process.env.NODE_ENV}`,
});

const website = require('./config/website');
const pathPrefix = website.pathPrefix === '/' ? '' : website.pathPrefix;

module.exports = {
  pathPrefix: website.pathPrefix,
  siteMetadata: {
    siteUrl: website.url + pathPrefix, // For gatsby-plugin-sitemap
    pathPrefix,
    title: website.title,
    titleAlt: website.titleAlt,
    description: website.description,
    banner: website.logo,
    headline: website.headline,
    siteLanguage: website.siteLanguage,
    ogLanguage: website.ogLanguage,
    author: website.author,
    twitter: website.twitter,
    facebook: website.facebook,
  },
  plugins: [
    `gatsby-plugin-layout`,
    `gatsby-plugin-react-helmet`,
    `gatsby-plugin-styled-components`,
    {
      resolve: `gatsby-plugin-prefetch-google-fonts`,
      options: {
        fonts: [
          {
            family: `Lato`,
            variants: [`400`, `700`],
          },
        ],
      },
    },

    {
      resolve: 'gatsby-plugin-apollo-shopify',
      options: {
        shopName: process.env.GATSBY_SHOPIFY_SHOP_NAME,
        accessToken: process.env.GATSBY_SHOPIFY_ACCESS_TOKEN,
      },
    },

    {
      resolve: `gatsby-source-graphql`,
      options: {
        typeName: 'Shopify',
        fieldName: 'shopify',
        url: `https://${
          process.env.GATSBY_SHOPIFY_SHOP_NAME
        }.myshopify.com/api/graphql`,
        headers: {
          'X-Shopify-Storefront-Access-Token':
            process.env.GATSBY_SHOPIFY_ACCESS_TOKEN,
        },
      },
    },

    {
      resolve: 'gatsby-source-prismic-graphql',
      options: {
        repositoryName: process.env.GATSBY_PRISMIC_REPO_NAME,
        accessToken: process.env.GATSBY_PRISMIC_ACCESS_TOKEN,
        path: '/preview', // (optional, default: /preview)
        previews: false, // (optional, default: false)
        refetchInterval: 60, // (optional, default: null)
        pages: [
          {
            type: 'Client', // TypeName from prismic
            match: '/client/:uid', // Pages will be generated under this pattern
            path: '/client-draft', // Placeholder page for unpublished documents
            component: require.resolve('./src/templates/client.js'),
          },
        ],
      },
    },

    {
      resolve: `gatsby-transformer-json`,
      options: {
        typeName: `json`,
      },
    },
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `settings`,
        path: `./src/settings/`,
      },
    },

    `gatsby-plugin-netlify`,
    `gatsby-plugin-netlify-cache`,
    {
      resolve: `gatsby-plugin-manifest`,
      options: {
        name: website.title,
        short_name: website.titleAlt,
        description: website.description,
        start_url: pathPrefix,
        background_color: website.backgroundColor,
        theme_color: website.themeColor,
        display: 'standalone',
        icon: website.favicon,
      },
    },
    `gatsby-plugin-offline`,
    'gatsby-plugin-sitemap',
  ],
};

[birkir]

Thanks!

Can you try swapping out gatsby-source-graphql with gatsby-source-graphql-universal?

Quick question, why do you have both gatsby-plugin-apollo-shopify and source-graphql with Shopify fieldName?

[OllieJT]

Will try that now!

In all honesty, I'm not entirely sure. It's used on the product pages. I believe it handles data that needs to be dynamic (like if a product is in stock).

I have been iterating on this starter: https://github.com/gil--/gatsby-starter-shopifypwa

[OllieJT]

gatsby-source-graphql-universal

No luck unfortunately. It immedietly spat out;

error
Your plugins must export known APIs from their gatsby-node.js.
The following exports aren't APIs. Perhaps you made a typo or your plugin is outdated?

See https://www.gatsbyjs.org/docs/node-apis/ for the list of Gatsby Node APIs

- The plugin "gatsby-source-graphql-universal@3.0.7" is exporting a variable named "getRootQuery" which isn't an API.

followed by a similar error to above, only this time referencing gatsby-source-graphql-universal

Error: The plugin "gatsby-source-prismic-graphql" created a node of a type owned by another plugin.
          The node type "GraphQLSource" is owned by "gatsby-source-graphql-universal".
          If you copy and pasted code from elsewhere, you'll need to pick a new type name
          for your new node(s).
          The node object passed to "createNode":
          {
      "id": "9a7fdc12-8d8d-555a-b3a1-68493aad9640",
      "typeName": "PRISMIC",
      "fieldName": "prismic",
      "parent": null,
      "children": [],
      "internal": {
          "type": "GraphQLSource",
          "contentDigest": "0b8ccc097cd4cedf361c5b6d1d40bff3",
          "ignoreType": true,
          "owner": "gatsby-source-prismic-graphql"
      }
  }
...

[birkir]

Bear with me, I released 3.1.2 with updated API to solve the previous error message, check and see if it works now.

If not, I'll have to get a full repro to solve this.

Thanks again.

[OllieJT]

No dice unfortunately @birkir -- unless I am missing something.

I tried "gatsby-source-prismic-graphql": "^3.1.2" with both "gatsby-source-graphql": "^2.0.18" & "gatsby-source-graphql-universal": "^3.1.3"

With the original error each time.

[birkir]

Ok thank you. I'll attempt to make a repro!

[OllieJT]

Hello @birkir have you had any luck with this. Are there any other steps I could take to help troubleshoot this?

I've run into other issues with the /angeloashmore/gatsby-source-prismic plugin and would like to be using this one.

[zeekrey]

Hey there, I run into the same issue :(

Here is my setup:

npm list graphql
+-- gatsby@2.18.0
| `-- graphql@14.5.8
`-- gatsby-source-prismic-graphql@3.4.0-beta.2
  `-- gatsby-source-graphql-universal@3.1.11
    +-- @types/graphql@14.5.0
    | `-- graphql@14.5.8  deduped
    `-- graphql@14.5.8

package.json
{
  ...
  "dependencies": {
    "@emotion/core": "^10.0.22",
    "@emotion/styled": "^10.0.23",
    "axios": "^0.19.0",
    "facepaint": "^1.2.1",
    "formik": "^2.0.4",
    "gatsby": "^2.18.0",
    "gatsby-image": "^2.2.33",
    "gatsby-plugin-google-analytics": "^2.1.28",
    "gatsby-plugin-manifest": "^2.2.29",
    "gatsby-plugin-prefetch-google-fonts": "^1.4.3",
    "gatsby-plugin-react-helmet": "^3.1.15",
    "gatsby-plugin-scroll-reveal": "0.0.4",
    "gatsby-plugin-sharp": "^2.3.2",
    "gatsby-plugin-transition-link": "^1.16.2",
    "gatsby-source-filesystem": "^2.1.38",
    "gatsby-source-prismic-graphql": "3.4.0-beta.2",
    "gatsby-transformer-sharp": "^2.3.5",
    "intersection-observer": "^0.7.0",
    "lodash": "^4.17.15",
    "prismic-reactjs": "^1.1.2",
    "react": "^16.12.0",
    "react-dom": "^16.12.0",
    "react-helmet": "^5.2.1",
    "smooth-scroll": "^16.1.0"
  },
  "devDependencies": {
    "prettier": "^1.19.1"
  },
  "resolutions": {
    "gatsby-source-graphql": "2.0.18"
  },
 ...
}

gatsby-config.json
module.exports = {
  siteMetadata: {
    ...
  },
  plugins: [
    `gatsby-plugin-react-helmet`,
    `gatsby-plugin-scroll-reveal`,
    `gatsby-plugin-sharp`,
    `gatsby-transformer-sharp`,
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `data`,
        path: `${__dirname}/static/`,
      },
    },
    {
      resolve: `gatsby-plugin-manifest`,
      options: {
        ...
      },
    },
    {
      resolve: `gatsby-plugin-google-analytics`,
      options: {
        ...
      },
    },
    {
      resolve: `gatsby-plugin-prefetch-google-fonts`,
      options: {
        fonts: [
          {
           ...
          },
        ],
      },
    },
    {
      resolve: 'gatsby-source-prismic-graphql',
      options: {
        repositoryName: '', // required
        defaultLang: 'de-de', // optional, but recommended
        accessToken: '', // optional
        // prismicRef: '...', // optional, default: master; useful for A/B experiments
        path: '/preview', // optional, default: /preview
        previews: true, // optional, default: false
        pages: [{ // optional
          type: 'Post', // TypeName from prismic
          match: '/post/:uid', // pages will be generated under this pattern (optional)
          path: '/posts', // placeholder page for unpublished documents
          component: require.resolve('./src/templates/post.js'),
          // sortBy: 'date_ASC', // optional, default: meta_lastPublicationDate_ASC; useful for pagination
        }],
        sharpKeys: [
          /image|photo|picture/, // (default)
          'profilepic',
        ],
      }
    },
  ],
}

When I use yarn and the resolutions key in the package.json I can gatsby develop and build. But when I deploy the site I get different graphql errors.

Any ideas? :(