How to implement @defer queries with Apollo GraphQL Client in Angular using graphql codegen?

Question

I am trying to implement @defer queries with the Apollo GraphQL Client in an Angular project. I have the latest versions of the required libraries, but I'm unable to find any documentation or examples online that explain how to achieve this.

I have successfully set up Apollo GraphQL Client in my Angular project using graphql codegen for generating types. The basic queries and mutations are working fine. However, I want to optimise my application by using the @defer directive for certain parts of my GraphQL queries.

I have attempted to search for examples or documentation on how to implement @defer queries with Apollo GraphQL Client in Angular, but I have been unsuccessful so far. It seems like there is a lack of resources specifically addressing this topic.

I've setup the apollo client with this configuration:

const authLink = setContext(async (_, { headers }) => {
    return ({
      headers: {
        ...headers,
        "content-type": "application/json",
        accept: "application/json, multipart/mixed;boundary=\"graphql\";deferSpec=20220824"
      }
    });
  });

And I'm executing the GraphQL query through this:

private someGeneratedDeferGQL = inject(SomeGeneratedDeferGQL);
constructor() {
   this.someGeneratedDeferGQL.watch({ someVariable }).valueChanges.pipe(
      map(...)
   );
}

Looking at the Network tab of my browser, I was able to pull the defered data; however, I am getting this error:

ERROR ApolloError: Http failure during parsing for http://localhost:3000/graphql
    at new ApolloError (ui/node_modules/.pnpm/@apollo+client@3.7.16_graphql@16.7.1/node_modules/@apollo/client/errors/index.js:26:28)
    at ui/node_modules/.pnpm/@apollo+client@3.7.16_graphql@16.7.1/node_modules/@apollo/client/core/QueryManager.js:665:19
    at both (ui/node_modules/.pnpm/@apollo+client@3.7.16_graphql@16.7.1/node_modules/@apollo/client/utilities/observables/asyncMap.js:16:53)
    at ui/node_modules/.pnpm/@apollo+client@3.7.16_graphql@16.7.1/node_modules/@apollo/client/utilities/observables/asyncMap.js:9:72
    at new ZoneAwarePromise (ui/node_modules/.pnpm/zone.js@0.13.1/node_modules/zone.js/dist/zone.js:1340:25)
    at Object.then (ui/node_modules/.pnpm/@apollo+client@3.7.16_graphql@16.7.1/node_modules/@apollo/client/utilities/observables/asyncMap.js:9:24)
    at Object.error (ui/node_modules/.pnpm/@apollo+client@3.7.16_graphql@16.7.1/node_modules/@apollo/client/utilities/observables/asyncMap.js:17:49)
    at notifySubscription (ui/node_modules/.pnpm/zen-observable-ts@1.2.5/node_modules/zen-observable-ts/module.js:137:18)
    at onNotify (ui/node_modules/.pnpm/zen-observable-ts@1.2.5/node_modules/zen-observable-ts/module.js:176:3)
    at SubscriptionObserver.error (http://localhost:4200/vendor.js:303673:5) {name: 'ApolloError', graphQLErrors: Array(0), protocolErrors: Array(0), clientErrors: Array(0), networkError: HttpErrorResponse, …}

But when I've modified the watch parameter to this

someGeneratedDeferGQL.watch({ someVariable }, { returnPartialData: true }).valueChanges.pipe(...);

I was able to get the data to the pipe map operator; however, the error is still there.

I am not really sure what to do by now.

Looking at the documentation for `returnPartialData`, it looks like I'm getting the cache data, that's why I was able to hit the `map` operator. Doesn't really help me anything about defer — Rich, Jun 27 '23 at 21:14

How to implement @defer queries with Apollo GraphQL Client in Angular using graphql codegen?

0 Answers0