Issue with GraphQL fragment composition in retrieving fields when spreading fragments on a type that is implemented by other types.

[vandercloak]

I'm facing an issue with GraphQL fragment composition when attempting to retrieve specific fields from the Slide and Element types. The problem arises when including fields from the Element type within the Slide type using fragment composition.

I am using Slide + Element for context to describe this issue, but I have encountered this in other fragment spreading attempts.

Here is the GraphQL schema for Slide:

type Slide {
  id: ID!
  elements: [Element!]!
}

And here is the GraphQL schema for Element/ElementText:

type Element {
  id: ID!
  name: String!
}

type ElementText implements Element {
  value: String!
}

---

Now, let's consider the following fragments. First, here's an example of the Fragment structure that does not work as I expected to:

fragment BaseElement on Element {
  id
  name
}

fragment SlideFragment on Slide {
  id
  elements {
    ...BaseElement
    ... on ElementText {
      value
    }
  }
}

This results in a json response of:

{
  "id": "1",
  "name": "test",
  "elements": [
    {
      "__typename": "ElementText"
    }
  ]
}

This response is incomplete and DOES NOT contain all the fields I expected it to.

---

Second, here's an example of the query that does work as expected (but is not desired):

fragment SlideFragment on Slide {
  id
  elements {
    id
    name
    ... on ElementText {
      value
    }
  }
}

This results in the correct json response of:

{
  "id": "1",
  "name": "test",
  "elements": [
    [
      {
        "__typename": "ElementText",
        "id": "eZheQga",
        "value": "This is the last slide"
      }
    ]
  ]
}

---

The second option works and is what I will be using until I find a solution. But its a pain for reusability and is honestly just puzzling to me. I am really curious to know how I am thinking about fragments incorrectly, or alternatively, if there is an issue/bug to bring it to light.

Thanks for any feedback! and if you made it this far 🤜🤛

[vandercloak]

Oh, almost forgot. Here are the package versions I am using (Everything should be latest as of the day of posting):

    "@graphql-codegen/cli": "^4.0.1",
    "@graphql-codegen/fragment-matcher": "^5.0.0",
    "@graphql-codegen/typescript": "^4.0.1",
    "@graphql-codegen/typescript-operations": "^4.0.1",
    "@graphql-codegen/typescript-react-apollo": "^3.3.7",

[wcastand]

same issue here i think
this is my query

const getSpendLimitQuery = gql(`
query SpendingLimit {
  user {
    ... on User {
      ...SpendingFragment
    }
  }
}`)

and the type generated are missing the spending limit, no matter what i add in User the only thing the types have is __typename.

when i look at the type it seems to be there but not properly type i'm guessing

my codegen.ts

import type { CodegenConfig } from "@graphql-codegen/cli"

const config: CodegenConfig = {
	overwrite: true,
	schema: process.env.GRAPHQL_API,
	documents: ["src/**/*.tsx", "app/**/*.tsx", "src/**/*.ts"],
	ignoreNoDocuments: true,
	generates: {
		"src/__generated__/": {
			preset: "client",
			plugins: [],
			presetConfig: {
				gqlTagName: "gql",
			},
		},
	},
}

export default config

deps:

"graphql": "^16.8.0",
"@graphql-codegen/cli": "5.0.0",
"@graphql-codegen/client-preset": "^4.1.0",
"urql": "^4.0.5",
"@parcel/watcher": "^2.2.0",

i think the main difference is that my graphql response from urql has the data of spending limit, just missing the types.