Next we import the ApolloModule into our app’s root module (app.module.ts) and configure the Apollo Client. The Client is what we will be using to call queries, mutations and so on to our graphql backend. Because we will be setting up our client to use authentication we need to configure Apollo Client with a specific link (Apollo Link) that will append the token we receive from Drupal (see previous authentication blog post) to all of the requests being made. You can find more information about Authentication in the official documentation for Apollo Angular
There are a couple of things going on here, let’s break this down into pieces :
We configure our http link by providing our backend api URL (contenta graphql endpoint). We then create a authentication context that will append our token to each http request going out with the HTTP header “Authorization” bearer and proving our token (previously saved in localStorage).
Saving our token
In our previous blog post we had a little snippet to kickstart our authentication, we need to adapt this to save our token in localStorage so that it is available for us here. In our app.component.ts change the method “configureWithNewConfigApi” to :
We also need to make sure to dispose it when we logout, so adapt the logout() method with :
ok! At this point Apollo is fully configured, we can start making queries. Also notice that by doing it this way we need to make sure that the roles that we are using (see previous blog post about Authentication) have the needed access rights to read / write or whatever you need to do to the correct entities.
Querying with Apollo is extremely easy, I suggest getting started by playing with the GraphiQL playground and experiment with queries structure / syntax first in order to make sure the queries work there before doing it on the frontend.
For this example I will assume a content type called “Client” exists in the Drupal installation (just setup a content type with name Client, machine name should be client). Also this content type should have some fields created :
Querying a list of clients
Before I do any frontend work (like mentioned above) I tested my query in GraphiQL Playground, that’s good because it provides autocomplete for fields that are available in any entity, relationships etc..Once that’s done I can move to the frontend app.
Now that the query works in GraphiQl the first step we can do to start working with clients in the frontend is creating a model for Clients. Inside src/app/ create a folder “models” with a file called client.model.ts :
Now in the app.component.ts (our root component for simplicity sake) let’s do a simple query to fetch clients. Our query will return an observable of our response (a list of clients) we can then pipe this in our template using the async pipe.
In our template we append a little button to run the Query :
We query our data using Apollo Client and wrapping our graphql in graphql-tag. The query is exactly the same we used in the GraphiQL playground. We map the response and get the entities out of the data received and assign it to our observable of type clients: Observable<Client>;.
In our template we then can easily list these out :
All together now
The full app.module.ts with authentication and apollo client and link configured looks like this :
Our root app.component.ts where we have our query for clients :
and our template for this component where we render the full list of clients we get from graphql :
That’s it! That’s all there is too queries with graphql and contenta using simple auth as the authentication mechanism. You can find all the things you can do with queries including creating fragments for shared parts of queries across multiple places of you app and other more advanced query features in the Official documentation site.