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,
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.
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!
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
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:
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`.
PostList does is take
posts as props and iterates over the posts to create instances of 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.
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
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.