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.

Apollo misses populating properties when fragments are spread

See original GitHub issue

Consider the following query —

  query GetMarketplaceAppListingById {
    marketplaceApp(appId: 1215460) {
      versions(first: 1) {
        edges {
          node {
            deployment {
              compatibleProducts {
                id
                ...Fragment1
              }
            }
          }
        }
      }
    }
  }

  fragment Fragment1 on CompatibleAtlassianProduct {
    __typename
    atlassianProduct {
      name
    }
  }

Here, If I spread Fragment1 instead of inlining properties, Apollo will not make the properties inside Fragment1 (e.g. atlassianProduct) available as data when using useQuery.

However, using the same query with a fetch POST request returns expected results.

image

Intended outcome: All fields inside the spread fragment should be visible in data

Actual outcome: All fields inside the spread fragment are ignored. However, If I inline properties of the fragment, expected results are obtained.

How to reproduce the issue: See minimal reproduction — https://codesandbox.io/s/apollo-graphql-fragment-bug-50yzl Versions 3.3.x

Issue Analytics

  • State:open
  • Created 3 years ago
  • Reactions:5
  • Comments:5 (2 by maintainers)

github_iconTop GitHub Comments

5reactions
benjamncommented, Feb 4, 2021

@pastelsky The issue here is that Apollo Client does not automatically know that CompatibleAtlassianDataCenterProduct is a subtype of the fragment type condition CompatibleAtlassianProduct. If the type names matched exactly, everything would work, but when subtyping is involved, you need some additional cache configuration.

The way to configure this information is by passing a possibleTypes object to the InMemoryCache constructor:

const client = new ApolloClient({
  cache: new InMemoryCache({
    possibleTypes: {
      CompatibleAtlassianProduct: [
        // List of all known direct subtypes of CompatibleAtlassianProduct:
        "CompatibleAtlassianDataCenterProduct",
        // ...
      ],
    },
  }),
  uri: "https://api.atlassian.com/graphql"
});

While you can mostly get away with manually listing only the subtypes that you actually need, you might want to generate possibleTypes automatically from your schema. Here are some instructions for how you might set that up.

2reactions
pastelskycommented, Feb 9, 2021

Thanks @benjamn . I’ll try this solution out. But regardless, I think it would be helpful to inform the user that a field type might not be resolvable using the currently available information and possibleTypes should be provided.

I found skipping of fields to be quite non-intuitive.

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 >
Childe Harold's Pilgrimage Summary & Analysis
Though here no more Apollo haunts his grot, And thou, the Muses' seat, art now their grave, Some gentle spirit still pervades the...
Read more >
Aeschylus' Theoroi and Realism in Greek Art - jstor
Theoroi fragment in order to show that two key components of realism in vi- ... planation saves the phenomenon but misses Aeschylus' point....
Read more >
Understanding Space Debris - The Aerospace Corporation
As the mechanics of orbital motion come into play over time, the cloud of fragments— the debris—spreads around the orbit close to the...
Read more >
CHALLENGE TO APOLLO: - NASA History Division
Challenge to Apollo: the Soviet Union and the space race, 1945-1974 1 by Asif A. Siddiqi p. cm.--(The. NASA history series) NASA SP;...
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