typescript-apollo-angular

import { Callout } from '@theguild/components' import { PluginApiDocs, PluginHeader } from '@/components/plugin' import { pluginGetStaticProps } from '@/lib/plugin-get-static-props' export const getStaticProps = pluginGetStaticProps(__filename, { hasOperationsNote: true })

How to use?

Simply create a .graphql file and write a random query like so:

query MyFeed {
  feed {
    id
    commentCount
  }
}

Using graphql-codegen you can generate a file with Angular services that you can use when coding an Angular component:

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

const config: CodegenConfig = {
  // ...
  generates: {
    'path/to/output.ts': {
      plugins: ['typescript', 'typescript-operations', 'typescript-apollo-angular']
    }
  }
}
export default config

Then, use it:

import { MyFeedGQL, MyFeedQuery } from './graphql'
// BE SURE TO USE Observable from rxjs and not from @apollo/client/core when using map
import { Observable } from 'rxjs'
import { map } from 'rxjs/operators'

@Component({
  selector: 'feed',
  template: `
    <h1>Feed:</h1>
    <ul>
      <li *ngFor="let item of feed | async">{{ item.id }}</li>
    </ul>
  `
})
export class FeedComponent {
  feed: Observable<MyFeedQuery['feed']>

  constructor(feedGQL: MyFeedGQL) {
    this.feed = feedGQL.watch().valueChanges.pipe(map(result => result.data.feed))
  }
}

@NgModule directive

All generated services are defined with @Injectable({ providedIn: 'root' }){:ts} and in most cases you don't need to overwrite it, because providing a service to the root injector is highly recommended. To customize that behavior you can use @NgModule directive, anywhere in an operation, to let the codegen know which injector should it use to create a service.

<Callout>You can't use multiple @NgModule directives in the same operation</Callout>

query feed {
  feed @NgModule(module: "./feed/feed.module#FeedModule") {
    id
    title
  }
}

@namedClient directive

Sometimes you end up with multiple Apollo clients, which means part of operations can't use the defaults. In order to customize that behavior you simply attach the @namedClient directive and the typescript-apollo-angular plugin takes care of the rest.

<Callout>You can't use multiple @namedClient directives in the same operation</Callout>

query feed {
  feed @namedClient(name: "custom") {
    id
    title
  }
}