Unable to use query fragments directly in a query

[bnm27]

Describe the bug

It appears that I cannot use a query fragment as a top level statement inside of a query.

e.g.

query allFilmsWithVariables {
   ...FilmWrapper
   ...PersonWrapper
 }

If the fragment is nested under another node it works fine, but when placed directly in a query then no data is returned.

As far as I can tell this is valid and should work since the API will return the same results for both queries when executed directly against the API

To Reproduce

I have put together an example here: https://stackblitz.com/edit/node-c2x7qv?file=src/app/films/films.component.graphql

Expected behavior

Data is returned when executing a query where a query fragment is supplied as a top level statement

Environment:

- @angular/cli@14.2.6
- @angular/core@14.2.7
- @apollo/client@3.7.0
- apollo-angular@4.1.0
- graphql@16.6.0
- typescript@4.7.4

Additional context

[bnm27]

Might be related to this: https://github.com/apollographql/apollo-client/issues/3402

[cantoute]

Having same issue. the issue pointed seems in deed related but is closed.

• graphql 16.6.0
• @apollo/client 3.7.10

[krechtern]

We are facing the same issue right now. The apollo client responses only with the __typename. But looking into the browser network request, the response contains all requested data.

[peterfication]

This one fixed it for me: https://github.com/apollographql/apollo-client/issues/7470

If your query type is not called Query, you have to specify it in the InMemoryCache. In the example given, the query type is called Root and hence it fails.

Edit: fix the link

[PowerKiKi]

@peterfication thanks for the solution, though you might have copy-pasted the wrong link.

I'll close this, since it is not specific to apollo-angular.