question-mark
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.

Nested Fragment on Union type field removes data from response

See original GitHub issue

When using nested fragments on a union type, the properties from the subfragments are removed from the response without warning or error, even though it is returned from the server.

Intended outcome: Nested fragments on union types should return the data as requested in the GraphQL query.

Actual outcome: Currently, the data objects in the response are replaced with an object that removes all properties but the __typename:

{"__typename": "Subtype"}

How to reproduce the issue:

Run a query against any GraphQL API that returns a union type with something like the following:

Partial Schema:

union UnionType = Subtype

type Subtype {
  id
  text
}

type Query {
  getUnion: UnionType
}
import {ApolloClient, gql, HttpLink, InMemoryCache} from '@apollo/client';
import fetch from "cross-fetch";

(async () => {
	const client = new ApolloClient({
		ssrMode: typeof window === 'undefined',
		link: new HttpLink({
			fetch,
			uri: 'https://graphqlapi-with-union-type.com/graphql', // Server URL (must be absolute)
			credentials: 'same-origin', // Additional fetch() options like `credentials` or `headers`
		}),
		cache: new InMemoryCache(),
	});

  const result = await client.query({
    query: gql`
      query Q {
        getUnion {
            __typename
            ...UnionFragment
            # If we add the SubtypeFragment here too, it returns the correct data, but not without that fragment:
            # ...SubtypeFragment
        }
      }

      fragment UnionFragment on UnionType {
          __typename
          ...SubtypeFragment
      }

      fragment SubtypeFragment on Subtype {
        __typename
        id
        text
      }
		`,
  });
	console.log(JSON.stringify(result.data, null, 2));
})();

When the fragment of the subtype is added to the root field, the correct data is returned, but this should work without explicitly adding all subfragments IMO.

Versions Binaries: Node: 10.22.0 - ~/.nvm/versions/node/v10.22.0/bin/node npm: 6.14.6 - ~/.nvm/versions/node/v10.22.0/bin/npm Browsers: Chrome: 85.0.4183.102 Firefox: 80.0.1 Safari: 13.1.2 npmPackages: @apollo/client: ^3.2.0 => 3.2.0 apollo: ^2.27.0 => 2.27.0

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Reactions:8
  • Comments:6 (3 by maintainers)

github_iconTop GitHub Comments

8reactions
benjamncommented, Sep 22, 2020

@ivome Have you tried providing possibleTypes to the InMemoryCache constructor? You don’t have to specify every possible subtype relationship in your schema, but you do need to specify the ones that matter for fragment matching.

7reactions
ivomecommented, Sep 22, 2020

@benjamn That does the trick, thank you!

Would be great to get some kind of error message though when apollo client removes data from the response in such a case.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Fragments - Apollo GraphQL Docs
A GraphQL fragment is a piece of logic that can be shared between multiple queries and mutations. ... Every fragment includes a subset...
Read more >
GraphQL: Nesting Reusable Interface Fragment within a ...
I'm new to GraphQL and Apollo Client. I'm trying to write DRY queries as much possible and found that Fragments can be of...
Read more >
Union types in GraphQL - Dev
Unions can be queried only as a field of some type. ... It will enable one to query a union field as shown...
Read more >
Current Working Draft
Fragments can be specified on object types, interfaces, and unions. Selections within fragments only return values when the concrete type of the object...
Read more >
GraphQL Fragments - YouTube
... screencast we'll explore working with GraphQL Fragments inside of queries, and mutations, as well as variables, and nested fragments !Le.
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found