Gatsby: GraphQL query fails in 2.0.0-beta.21 and later with Expected value of type "ContentfulCategory" but got: [object Object].

[szimek]

Description

After updating my app from [email protected] to 21, I'm getting the following errors (many, many times) when I run gatsby develop or gatsby build:

The GraphQL query from /Users/.../blog/src/templates/PostPage.js failed.

Errors:
  Expected value of type "ContentfulCategory" but got: [object Object].

  GraphQL request (60:7)
  59:     edges {
  60:       node {
            ^
  61:         categoryId

It's also broken in the latest beta.34. The query itself in the page component looks like this:

  query PostQuery($locale: String!, $postId: String!) {
    source: contentfulPost(...) {...}

    sourceTranslations: allContentfulPost(...) {...}

    allCategories: allContentfulCategory(
      filter: { node_locale: { eq: $locale } }
    ) {
      edges {
        node {
          categoryId
          name
          slug
          description
          node_locale
        }
      }
    }

It fails in GraphiQL as well.

Steps to reproduce

Not sure :/

Environment

  System:
    OS: macOS High Sierra 10.13.5
    CPU: x64 Intel(R) Core(TM) i5-4278U CPU @ 2.60GHz
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 10.6.0 - /usr/local/bin/node
    Yarn: 1.7.0 - /usr/local/bin/yarn
    npm: 6.1.0 - /usr/local/bin/npm
  Browsers:
    Chrome: 68.0.3440.59
    Firefox: 62.0
    Safari: 11.1.1
  npmGlobalPackages:
    gatsby-cli: 1.1.52
    gatsby-dev-cli: 1.2.12

Dependencies

$ yarn list --pattern gatsby
yarn list v1.7.0
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
└─ [email protected]

[KyleAMathews]

Is the error the same in both versions? Can you reproduce this in other sites? E.g. is this a contentful plugin problem or a general Gatsby problem?

[szimek]

It looks like this error is caused by Gatsby. I'm using the latest version of Contentful source plugin ([email protected]) and this error does not appear when I'm using [email protected], but I'm getting it when I update to [email protected].

I've added console.log to graphql library (here) and it looks like I'm getting data for a different content type. returnType.name is ContentfulCategory, but the result contains data for ContentfulReadingList:

{
  "readingListId": "55555555",
  ...
  "contentful_id": "4ocVTiDPx6MGqsiggO0sw2",
  "children": [],
  "internal": {
    "type": "ContentfulReadingList",
    "contentDigest": "89f3c6202fe416efd04d6d831fcea747",
    "owner": "gatsby-source-contentful"
  },
  "node_locale": "en"
}

:/ No idea why it happens. I'll try to investigate it a bit more tomorrow, but I don't really know much about graphql internals.

[janosh]

I'm having the exact same issue after updating from v1 to v2:

The GraphQL query from /src/pages/blog.js failed.
Errors: Expected value of type "ContentfulBlogPost" but got: [object Object].

My dependencies are

yarn list --pattern gatsby
yarn list v1.7.0
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
└─ [email protected]

Any advice on how to troubleshoot this?

[janosh]

Perhaps this is related: I also get the error

Users/Janosh/Sites/ocean-artup.eu/src/components/Layout.js:101 Uncaught (in promise) ReferenceError: graphql is not defined
    at Module.eval (/src/components/Layout.js:101)
    ...
    at Module.eval (/src/templates/page.js:5)

in the Chrome console even though I import graphql in both those files:

import { graphql } from 'gatsby'

[szimek]

@KyleAMathews

I'm using VS Code debugger config provided by @pieh in https://github.com/gatsbyjs/gatsby/issues/4413 to debug it. Really useful stuff, thanks @pieh! :)

It happens in run graphql queries step:

success open and validate gatsby-config — 0.041 s
success load plugins — 0.263 s
success onPreInit — 2.166 s
success delete html and css files from previous builds — 0.354 s
success initialize cache — 0.142 s
success copy gatsby files — 0.054 s
success onPreBootstrap — 0.009 s
⠂ source and transform nodes
// Contentful stuff...
success source and transform nodes — 40.148 s
success building schema — 3.847 s
success createPages — 17.755 s
success createPagesStatefully — 0.068 s
success onPreExtractQueries — 0.013 s
success update schema — 4.003 s
⠄ extract queries from components
success extract queries from components — 0.374 s
⠂ run graphql queries

It looks like it might be something with caching or some variables used to generate cache key not being set. The code goes through run-sift.js#L180 a few times, but at some point:

• nodes variable there is an array of 10 ContentfulCategory objects
• typeName is undefined
• nodesCacheKey becomes {"nodesLength":10,"node_locale":true}
• resolvedNodesCache.get(nodesCacheKey) returns an array of 10 ContentfulReadingList objects...

I have no idea why this promise is resolved with data from cache, if there's also data in nodes variable, but maybe the issue is caused by typeName being undefined? It looks like runSift function is called in build-node-connections.js#L75-L81, but typeName is not passed there. Actually all keys in resolvedNodesCache look very similar:

{"nodesLength":1192,"node_locale":true}
{"nodesLength":2,"node_locale":true}
{"nodesLength":10,"node_locale":true}

so I guess if one has the same number of entries of different node types, the cache key will be the same. I'm also not sure if node_locale, which is used in filter condition in the query should have value of true or the actual value used in the filter, which is 'en' in my case.

[janosh]

@szimek Can you manually set typeName to ContentfulCategory and see how the promise at run-sift.js#L180 resolves then? Same thing with resolvedNodesCache, does the problem persist if you manually ensure all nodesLengths are different?

[szimek]

I'm 99% sure it's caused by missing typeName. It was added in https://github.com/gatsbyjs/gatsby/commit/27c644bbd0f1dab50afac647e55ecdd0d8407a36 commit, which was published in beta 21 and it was added to runSift call in schema/build-node-types.js, but was not added in schema/build-node-connections.js.

Unless someone does fixes it by then, I'll check it and create PR tomorrow, if I figure out what typeName is supposed to be in runSift call in schema/build-node-connections.js.

[szimek]

I added typeName param to runSift call in ./node_modules/gatsby/dist/schema/build-node-connections.js and it fixed this issue. I'm not sure 100% it's correct, but it seems to work. I'll create PR tomorrow.

[KyleAMathews]

@szimek's fix is out in 2.0.0-beta.37

[janosh]

I can confirm that beta 37 fixed the issue for me as well.