This shows examples of using the Apollo Client and Apollo-Angular.
Important: Make sure to observe the Apollo Cache with the Apollo Dev Tools extension.
- Backend server used by this example
- As of this commit
- Angular CLI
- Apollo Dev Tools browser extension
- For observing the cache
On one terminal window (run the GraphQL Code Generator tool):
npm run graphql
On another terminal window (run the Angular app):
npm start
Then go to http://localhost:4200
-
See
codegen.yml
for the GraphQL Code Generator configuration/setup -
apollo.config.json
file is the config for the Apollo GraphQL VS Code Extension to get code completion on graphql files. -
@client
directive is for client-side stuffs. This is an important directive for the apollo client to determine whether to hit the server or not when the query is hit. -
GraphQL Code Generator watches graphql files as per config and automatically generates TypeScript type definitions based on your valid GraphQL Schema + accompanying apollo-angular services ready to be injected to your components/services.