One of my goals for 2018 was to get started exploring GraphQL, which fits together perfectly with decoupled drupal. GraphQL is a query language by Facebook. It serves as a middleware between your client app and the server, making it super easy to understand as a frontend developer what you can query from the server, how responses are returned, caching strategies for fetching data and a lot more. For a more comprehensive description and feature set of GraphQL visit the GraphQL site.
I will go through three of the most common things when it comes to building an app using these technologies together :
So let’s get started with part 1, Authentication!!
Full code samples
The code samples can be found in Github. It includes all the frontend code and also the code for the custom mutations to be used with Drupal GraphQL.
The first thing we need to do is to have an installation of Contenta. There are informations on the page how to install but you can run the quick install by running the following command :
One you have installed Contenta, the Drupal graphql module will already be available for you to start using. It is an experimental module in Contenta so take your cautions while using it although it works pretty well and it’s already used in production by several companies.
One of the awesome things graphql module brings is installing by default GraphiQL. Visit
http://yourwebsiteurl/graphql/explorer and you will see GraphiQL there :
GraphiQL is like a playground for you to start experimenting with GraphQL queries without having to setup anything. You can run queries, mutations, explore the API giving you all the information you need to experiment without having to setup a frontend.
At this point you didn’t have to configure or setup anything at all, and you have a working setup of Drupal and Graphql, ready to receive queries. Pretty cool hein?
Lets go deeper and start setting up a frontend and configure things for authentication, querying and mutations.
Create your Angular frontend
The first thing we need to do in order to get started with our frontend is to create our angular app. Using the Angular CLI this is essentially just running :
Because Drupal’s simple auth module is built around Oauth2 we can easily leverage libraries to make it easier to handle authentication on the frontend, in this example I will be using OAuth 2 and OpenId Connect (OIDC) but you could easily use any other or even none and do it all by yourself.
Another great thing about GraphQL is that using authentication works exactly like it does in any HTTP-like environment, using common strategies and standards as for example oauth2.
Configuring simple auth
The first thing we need to do with Contenta in order to get authentication working is setting up the simple auth module to handle authentication. Because Mateu Aguiló Bosch has such great tutorials about how to setup simple auth (all available in Contenta’s tutorials btw) I won’t go through this here to save some time in the blog post. All I can say is I just followed it step by step and it worked great. For this post and in this use case I have used implicit grant as the method for authentication.
There are however a couple things I found could go a bit more “wrong” when setting this up so make sure to pay attention to :
- Private and public key’s permissions (warnings will be give in reports if configured wrong)
- make sure the role for the user has permissions to simple auth extras (“Allow using the AuthCode grant”)
At this point authentication is setup on the server (Drupal) and we can move on to configuring it on the client.
Configuring Angular Oauth2
For connecting Angular to our Drupal backend we will be using OAuth 2 and OpenId Connect (OIDC).
The first thing to be done is import the NgModule provided by the package in our application. In your app.module.ts file (in src/app) add the NgModule :
Next we will follow the instructions to configure the module for implicit flow by providing a auth.config.ts file that the package will use. this file can be located in the src/app/ folder.
A couple of things to note here :
First we provide the url of Contenta so that when logging in you are redirected to that url in order to authenticate.
You also need to provide a redirectUrl which is where the user will be redirected once login ends, we provide the default location of our app (if you are using a different url or port make sure to change this).
The last important thing to notice here is the scope, if you have watched the videos mentioned above on how to setup simple_auth you have seen that you must create roles, which will give simple auth the necessary information about a user’s roles and what he has access to.
The configuration has a couple of extra options you can use so make sure to refer to the official documentation for more information on all the possible options.
Now we need to connect the config with the app in our app’s root component (app.component.ts) :
Now we just need our template to call the login and logout methods :
That’s it!! At this point authentication is working. You should be able to run the app by running :
and click the button “login” in order to get redirected to Contenta, provide your authentication credentials and get redirected back to the app. The token provided by simple auth is then registered in the oauth package we used and you can access it inside your app by doing :
In the next post we will see how you can connect Apollo and GraphQL to our authentication in order to provide authorization / controlled access for Queries and Mutations.