Using Auth0 with Graphcool, Part 3

This is part 3 in this series. Below are the previous parts.

You can find the source code for this on GitHub.

Welcome back! In part 2, we added the ability to create a user and sign in to our app. In part 3, we are going to add the ability for a user to create posts! Let’s jump right in.

Some House Cleaning

Before we get to the code, we need to make some modification to our Post schema in the Graphcool console. The Post schema provided in the example app has two fields we need to delete, imageUrl and description. We’re going to change things up and only post some text when creating new posts. Just click on these fields, then hit delete at the bottom left of the popup.

Delete these fields

Next, we are going to add a new field called text. On the Post schema, click on ‘Add Field’. Make the name of the field ‘text’, the type ‘string’, then click on Advanced Options and make this field required. Click ‘Create Field’ and we will be good to go!

Modify Permissions

Next, we need to modify permissions on the Post schema to make sure that only authenticated users can create posts. Graphcool, per usual, makes this very simple.

Click on ‘Permissions’ in the lefthand sidebar, then locate the permissions for Post.

As you can see, you can modify the permissions for each operation on a schema. Click on Create. This should bring up a modal that displays some permission settings. On the first tab, you can set the permission on particular fields, or the whole type. We want to apply this permission to the whole type.

Go to ‘Define Rules’ and selected ‘Authentication required’, then click ‘Update Permission’. Now, Graphcool will make sure a valid Auth0 id token is being passed in the authorization header before letting someone create a new post.

With that, we can now get into the code!

The Post Components

We are going to create four components that will make up the functionality for creating posts. To stick to the subject of this series, I will post the source code for each component and go over anything relevant to Auth0/Graphcool.


PostsContainer is what is going to hold the posting functionality together. It is responsible for displaying two components: PostInput and PostList, which we will create in a moment.

Let’s look at the postsQuery on line 46 first. We use this to fetch the user and all of their posts when the component renders. When the data is loaded, we pass it to the PostList component to display the user’s posts.

On line 36, we have our createPost mutation. This is very similar to the createUser mutation we used in Part 2. We pass this to the PostInput component to use when entering a new post.

You’ll notice that we are doing something a bit different when connecting this component to Apollo. On line 63, we’re making use of Apollo’s update method. This just allows us to update the cache after a mutation/query rather than re-fetching the data. So, when we create a new post, it will update the data model we have in the cache so we don’t have to make a new query.


This is just a simple input element where we can enter the text for our posts. We pass the text and the user’s id to the createPost mutation given to us by the PostsContainer component in the the props when we press ‘Enter`.


All PostList does is take user and posts as props and iterates over the posts to create instances of the Post component.


In the Post component, all we are doing is taking the data we get from the PostList component and displaying it. Specifically, we are showing the user’s username, the date the post was created, and the post’s text.

Updating App.js

We need to update App.js to display the PostsContainer when logged in. Replace the contents of App.js with the following:


I made some minor changes to style and such, but you can ignore that’s not too important. Here, we just update the renderLoggedIn function to display PostsContainer.

Wrapping Up

Now when running our app, we should be able to login via Auth0 and create posts! If all is well, you should see something like this (minus the existing posts, of course):

Pretty easy, right? As a bonus challenge, you could add functionality to delete/edit posts and display user information such as a profile picture, the user’s name, and such. You can even retrieve that information from Auth0 itself when using social sign in!

Again, you can find the complete source code for this on GitHub. If you run into any issues or have questions, don’t hesitate to leave a comment! I’d like to also point you over to Graphcool’s great list of tutorials (one of which inspired this series). You can find those here. Also, the folks at Graphcool just released an awesome fullstack GraphQL tutorial, which you can find here.

Find this useful or interesting? Give me a rec and a follow. Also, I just launched a new website for my new freelancing business. Looking for a React dev/need a web app built? Check me out here, . You can also find me on Twitter and GitHub.

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.