__typename is not added automatically after relay-compiler was removed

[NiviJah]

Summary

I am using an if statement to determine the type of the GQL fragment, and render the right component accordingly.
This was working well in gatsby 2.7.5, but this field no longer exists after upgrading Gatsby to 2.18.15

"gatsby-source-graphql": "^2.1.29"

• the data is coming from Contentful

Example code:

          if (component.__typename == 'CGQL_HeroCarousel') {
            return <HeroCarousel />;
          }

Example returned Json in 2.18.15:

{
sys: {id: "myId"}
name: "Component Name"
...
}

Example returned Json in 2.7.5:

{
__typename: "CGQL_HeroCarousel"
sys: {id: "myId"}
name: "Component Name"
....
}

"gatsby-node.js" has not changed, but included here for more information:

    {
      resolve: 'gatsby-source-graphql',
      options: {
        typeName: 'CGQL',
        fieldName: 'CGQL',
        url: getContentFulUrl(),
        headers: getContentFulHeader()
      }
    }

[yaacovCR]

I am not sure if this is related to the use of graphql-tools-fork by #20042

You should still be able to access __typename, but you should have to specify the __typename field in the query. I believe you are probably specifying the field already in the query? A minimal reproduction might be helpful, I would be happy to look into it.

[vladar]

Looks like graphql-tools adds AddTypenameToAbstract transform by default here.

graphql-tools-fork has a different set of default transforms.

[yaacovCR]

Includes that one as well later.

https://github.com/yaacovCR/graphql-tools-fork/blob/2a845af122667042b096b2a50027b24d3dc41f12/src/stitching/delegateToSchema.ts#L122

[yaacovCR]

Order changes because chaining transforms now works with multiple transformResult, so check result goes first, because result transforms processed in reverse order, should not matter here.

[yaacovCR]

Is it strange that the typename is not null? Almost as if it is being stripped from the outer query?

[yaacovCR]

I am able to modify example using-gatsby-source-graphql to retrieve typename of interface:

import { graphql, Link } from "gatsby"
import React from "react"
import { makeBlogPath } from "../utils"
import dateformat from "dateformat"

export default ({ data }) => (
  <div>
    <h1>My Gatsby Blog</h1>
    <p>
      <a href="https://www.gatsbyjs.org/packages/gatsby-source-graphql/">
        Using gatsby-source-graphql
      </a>
    </p>
    {[data.cms.node].map((blog, i) => (
      <Link key={i} to={makeBlogPath(blog)}>
        <h2>
          {dateformat(blog.createdAt, `fullDate`)} - {blog.id} :{" "}
          {blog.__typename}
        </h2>
      </Link>
    ))}
  </div>
)

export const query = graphql`
  query {
    cms {
      node(id: "cjjr1gco3exhc0953ry1i5z3q") {
        ... on GraphCMS_BlogPost {
          id
          title
          createdAt
          slug
          __typename
        }
      }
    }
  }

`

[vladar]

Hi @NiviJah! It would be incredibly helpful if you could create a minimal reproduction. This is a simplified example of the issue that makes it clear and obvious what the issue is and how we can debug it.

[NiviJah]

Sure thing, I was following the thread but I'm away of my computer for the holidays.

I will do my best replicating this and will update.

[NiviJah]

We encountered another related problem that I can't really put into words.
basically data that is not specifically declared in fragments renders an empty object.

So in 2.18.15:

While on 2.7.5, same exact code will render:

As a result, manually adding __typename to the GQL queries will still fail in some cases.

I'm still trying to create a replicatable repo

[yaacovCR]

Why don't you post the part where you construct the query (until you can get a full working repo)?

[NiviJah]

Relevant pieces of code:

Page(template) level GQL Query

export const pageQuery = graphql`
  query LocaionSearch(
    $sitePageId: Int
    $locale: String
  ) {
    CGQL {
      DynamicPageCollection(
        locale: $locale
        where: { sitePageId: $sitePageId }
      ) {
        ...DynamicPageFragment
      }
    }
  }
`;

DynamicPageFragment:

import { graphql } from 'gatsby';

export const DynamicPageFragment = graphql`
  fragment DynamicPageFragment on CGQL_DynamicPageCollection {
    items {
      sys {
        id
      }
      metaDescription
      titleTag
      itemsCollection {
        items {
          ...PanelFragment
          [...] // multiple other fragments
        }
      }
    }
  }
`;

PanelFragment - this is where the __typename was added

import { graphql } from 'gatsby';

export const PanelFragment = graphql`
  fragment PanelFragment on CGQL_Panel {
    sys {
      id
    }
    name
    variation
    headline
    subHeadline
  }
`;

[yaacovCR]

import { graphql } from 'gatsby';

export const DynamicPageFragment = graphql`
  fragment DynamicPageFragment on CGQL_DynamicPageCollection {
    items {
      sys {
        id
      }
      metaDescription
      titleTag
      itemsCollection {
        items {
          __typename    <<<<<<<<<<<
          ...PanelFragment
          [...] // multiple other fragments
        }
      }
    }
  }
`;

Above is where I would put __typename. If you can get a full reproducing example I can take a closer look of course.

[NiviJah]

Yes, I can confirm that fixes the issue.
To make it clear to whoever is viewing this issue in the future,
The __typename is specified on the "parent container" rather than on the component query.

in contentful, the "DynamicPage" content type, contains multiple items, "Panel" is one of those.

there are two issues solved by specifying __typename on DynamicPage

1. all child fragments get __typname
2. components not declared in a fragment, but exist in the content model, get __typname as well

This worked "automatically" in older versions, but as to 2.18.x this has to be declared manually

DynamicPageFragment ( "parent container"):

import { graphql } from 'gatsby';

export const DynamicPageFragment = graphql`
  fragment DynamicPageFragment on CGQL_DynamicPageCollection {
    items {
      sys {
        id
      }
      metaDescription
      titleTag
      itemsCollection {
        items {
          __typename << added
          ...PanelFragment
          [....] //others
        }
      }
    }
  }
`;

PanelFragment (component):

import { graphql } from 'gatsby';

export const PanelFragment = graphql`
  fragment PanelFragment on CGQL_Panel {
    __typename << removed
    sys {
      id
    }
    name
    variation
    headline
    subHeadline
  }
`;

[vladar]

Oh, this is probably unrelated to gatsby-source-graphql changes. It was caused by this PR: #19665

Basically relay compiler was adding __typename automatically and we replaced it with our own solution. A quote from relay-comiler docs:

Relay will add extra fields for you during the compilation step, and you need to add these fields to your optimistic response. For example:

Relay will add an id field if it exists on the type for caching purpose.

Relay will add a __typename field if the type is an union or an interface.

We should fix this in the core as this was a breaking change.

[NiviJah]

Thank you @vladar for confirming that.