Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Error with custom GraphQL union types

See original GitHub issue

Description

I am using Strapi + GraphQL + Gatsby and following this guide I am trying to solve “dummy content” error while using Strapi’s dynamic zones.

Steps to reproduce

My gatsby-node.js:

export const createSchemaCustomization = ({ actions }) => {
  const { createTypes } = actions
  const typeDefs = `
    type LocalImage {
      localFile: File
    }

    type ComponentCommonImageText {
      id: ID!
      image: LocalImage
      text: String
      description: String
    }
    type ComponentCommonTitleDescription {
      id: ID!
      title: String
      description: String
    }

    type ComponentSectionsSectionImageText {
      id: ID!
      label: String
      image_text: [ComponentCommonImageText]
    }
    type ComponentSectionsSectionTexts {
      id: ID!
      label: String
      texts: [ComponentCommonTitleDescription]
    }

    union PortfolioPageDynamicDynamicZone =  ComponentSectionsSectionTexts | ComponentSectionsSectionImageText

    type StrapiPortfolioPage implements Node {
      dynamic: [PortfolioPageDynamicDynamicZone]!
    }
  `
  createTypes(typeDefs)
}

GraphQL query:

query PortfolioPage {
  strapiPortfolioPage {
    sub_heading
    heading
    dynamic {
      ... on ComponentSectionsSectionTexts {
        __typename
        id
        texts {
          title
          description
        }
      }
      ... on ComponentSectionsSectionImageText {
        __typename
        id
        label
        image_text {
          image {
            localFile {
              publicURL
            }
          }
        }
      }
    }
  }
}

Expected result

Success result of query

Actual result

I am getting the next error:

{
  "errors": [
    {
      "message": "Cannot read property 'type' of undefined",
      "locations": [
        {
          "line": 49,
          "column": 7
        }
      ],
      "path": [
        "strapiPortfolioPage",
        "dynamic",
        0
      ],
      "stack": [
        "TypeError: Cannot read property 'type' of undefined",
        "    at /Users/user/develop/project/frontend/node_modules/gatsby/src/schema/schema.js:410:57",
        "    at completeAbstractValue (/Users/user/develop/project/frontend/node_modules/graphql/execution/execute.js:652:21)",
        "    at completeValue (/Users/user/develop/project/frontend/node_modules/graphql/execution/execute.js:585:12)",
...t

This is from here: https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby/src/schema/schema.js#L410 (Line 410)

Environment

  System:
    OS: macOS 11.1
    CPU: (8) arm64 Apple M1
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 15.5.1 - ~/.nvm/versions/node/v15.5.1/bin/node
    Yarn: 1.22.10 - /opt/homebrew/bin/yarn
    npm: 7.3.0 - ~/.nvm/versions/node/v15.5.1/bin/npm
  Languages:
    Python: 2.7.16 - /usr/bin/python
  Browsers:
    Chrome: 87.0.4280.141
    Firefox: 84.0.2
    Safari: 14.0.2
  npmPackages:
    gatsby: ^2.30.3 => 2.30.3 
    gatsby-image: ^2.4.5 => 2.4.5 
    gatsby-plugin-manifest: ^2.4.5 => 2.4.8 
    gatsby-plugin-material-ui: ^2.1.10 => 2.1.10 
    gatsby-plugin-netlify: ^2.3.13 => 2.3.13 
    gatsby-plugin-react-helmet: ^3.3.10 => 3.3.10 
    gatsby-plugin-react-svg: ^3.0.0 => 3.0.0 
    gatsby-plugin-root-import: ^2.0.5 => 2.0.5 
    gatsby-plugin-sass: ^2.3.12 => 2.3.12 
    gatsby-plugin-sitemap: ^2.4.12 => 2.4.12 
    gatsby-plugin-typography: ^2.5.10 => 2.5.10 
    gatsby-plugin-use-query-params: ^1.0.1 => 1.0.1 
    gatsby-source-filesystem: ^2.9.1 => 2.9.1 
    gatsby-source-strapi: ^1.0.0-alpha.0 => 1.0.0-alpha.0 
  npmGlobalPackages:
    gatsby-cli: 2.18.0

Issue Analytics

State:
Created 3 years ago
Comments:6 (1 by maintainers)

Top GitHub Comments

2reactions

iksentcommented, Feb 10, 2021

I was able to fix my previous problem with custom file type:

    type LocalFile {
      localFile: File @link(from: "localFile___NODE")
    }
    type ComponentSectionsSectionImageText {
      id: ID!
      label: String
      image: LocalFile
    }

0reactions

chandlervdwcommented, Aug 10, 2022

I’m getting this same issue with the latest and greatest. I found the union type in the generated gatsby-types.d.ts but when I try to utilize it in a fragment, it has a GraphQL Validation error.

If I utilize these fragments in the frontend, it works just fine, as well as when using the GraphiQL explorer. Just the linter warning…