angular-apollo-example | GraphQL queries/mutations with Angular Apollo Boost | GraphQL library

We start with our Apollo server from last time, placing the files in the backend folder. Set it up and run the server. Generate a new Angular app and install dependencies.
Lets setup our GraphQL query that retrieves all the tweets. In src/app/graphql directory first we create a file called tweets.graphql with our tweet query:. One of the most useful tools to work with GraphQL is GraphQL Code Generator which will generate types for our queries and also a ready to use services introduced in Apollo Angular v1.2.0. To start out with, we point gql-gen at our GraphQL server to generate a schema.json file. Now that we have our schema we have code-gen read the graphql files to see which documents we have. Now let's add those commands to npm scripts to make the whole process easier. First one, under graphql:introspect, the second one will be graphql:generate. With Apollo Angular and GraphQL Code Generator you don't have to manually inject Apollo service and use generated types in every of your query or mutation. Now lets add a class property, a tweets observable, and call our query on init. The watch method is going to update our observable whenever the underlying Apollo store on our client is updated, even from another query. We'll see that in the next section when we go over optimistic updates. In our app.component.html lets output our tweets and a button/likeTweet function we'll cover in the next section to like a tweet. I used Ionicons for the button, when we use web components make sure to add.
Lets setup a Mutation on our backend that increments the likes on a tweet by 1. Jump into the backend/src/index.ts file and add the mutation to the typeDefs:. Then we code our mutation in the resolver, note that in a real firebase application you would use a transaction to increment the likes. In our example we are just setting the variable, refetching it, and returning. Save and reload the server. Return back to our app and lets start setting up the like tweet mutation by create like-tweet.graphql file. Make sure your terminal is in the src/app folder and re-run two npm scripts. Now with our types and services we are ready to write the mutation function.