Table of Contents
Intro
In this article, I’ll present the UI part of the Social Media demo project we started exploring last time.
In the previous post, you dug into the GraphQL API and how to send queries via the Apollo Playground.
Now it’s time to bring it all together and see how the React front-end integrates with the API using Apollo Client.
I am not really a front-end person and by no means a React expert. The UI is quite primitive, especially in terms of User Experience. Most of it, I’ve taken directly from the source code provided with the Udemy “Model GraphQL with Node” course.
Still, if you are a front-end developer, I believe there’s a lot of value for you in this post as it demonstrates the core mechanics of interacting with the GraphQL API via Apollo Client.
Set Up the Environment
In order to run the system end to end, please first follow the steps from the previous article to set up the back-end environment.
Once you’re done with that, running the UI is just a matter of executing npm install and npm run start from the client directory of the repo.
Sending GraphQL Requests Using Apollo Client
There are two types of requests we’re sending to the GraphQL API – mutations and queries.
Apollo Client provides useful tools for both of them. The approach is very similar, so I’ll demonstrate how to execute mutations, and you can inspect how the queries work on your own.
One example of a mutation is the Sign Up request that you can check here.
First, we import the required symbols:
import { useMutation, gql } from "@apollo/client";
Then, we define the Signup request body in the gql template literal:
const SIGNUP = gql`
mutation Signup(
$email: String!
$password: String!
$name: String!
$bio: String!
) {
signup(
credentials: { email: $email, password: $password }
name: $name
bio: $bio
) {
userErrors {
message
}
token
}
}
`;
You use the gql function to parse the mutation string into a GraphQL document that you then pass to the useMutation hook:
useMutation returns a function that you can call to execute the mutation plus an object representing the mutation execution status.
In this case, useMutation returns the signup function that’s invoked on a button click.
Feel free to read more about mutations and queries in React from the Apollo Client documentation.
Demo
Let’s continue with a quick overview of the User Interface and inspect the queries the different pages send to the GraphQL API.
You’ve already seen detailed descriptions of the supported API methods in the first post, so here I’ll just present them for every page without digging into any explanations.
You can see all the supported screens in the app via the defined routes in the App component:
Sign Up
To create a new user, navigate to localhost:3000/signup. Populate the form and hit the Signup button:
GraphQL request:
{
"operationName":"Signup",
"query":"mutation Signup($email: String!, $password: String!, $name: String!, $bio: String!) {
signup(
credentials: {email: $email, password: $password}
name: $name
bio: $bio
) {
userErrors {
message
__typename
}
token
__typename
}
}”,
"variables":{
"email":"vasil@sampleapp.com",
"password":"mypass",
"name":"Vasil",
"bio":"Vasil's Bio"
}
}
Fiddler capture:
Sign In
Once you’ve created an account, navigate to the /signin page and enter your credentials:
GraphQL request:
{
"operationName":"Signin",
"query":"mutation Signin($email: String!, $password: String!) {
signin(credentials: {email: $email, password: $password}) {
userErrors {
message
__typename
}
token
__typename
}
}”,
"variables":{
"email":"vasil@sampleapp.com",
"password":"mypass"
}
}
Fiddler capture:
Get Profile
To get to the user profile page, go to /profile/<userId>. Initially, this page will be empty as we haven’t added any posts yet:
GraphQL request:
{
"operationName":"GetProfile",
"query":"query GetProfile($userId: ID!) {
profile(userId: $userId) {
bio
isMyProfile
user {
name
posts {
id
title
content
createdAt
published
__typename
}
__typename
}
__typename
}
}”,
"variables":{
"userId":"8"
}
}
Fiddler capture:
Create Post
Hit the Add Post button and create a new post:
GraphQL request:
{
"operationName":"CreatePost",
"query":"mutation CreatePost($title: String!, $content: String!) {
postCreate(post: {title: $title, content: $content}) {
userErrors {
message
__typename
}
post {
title
createdAt
content
user {
name
__typename
}
__typename
}
__typename
}
}”,
"variables":{
"title":"Test Post",
"content":"Test Content"
}
}
Fiddler capture:
Then, reload the page to see the new post:
Publish Post
Click the publish button to publish the page:
GraphQL request:
{
"operationName":"PublishPost",
"query":"mutation PublishPost($postId: ID!) {
postPublish(postId: $postId) {
post {
title
__typename
}
__typename
}
}”,
"variables":{
"postId":"13"
}
}
Fiddler capture:
Reload the page so you can see the post is now published:
Get Posts
The post should now be visible on the /posts page:
GraphQL request:
{
"variables":{
},
"query":"{
posts {
id
title
content
createdAt
user {
name
__typename
}
__typename
}
}”
}
Fiddler capture:
Delete Post
You can delete a post if you get back to the profile page and hit the delete button:
GraphQL request:
{
"operationName":"DeletePost",
"variables":{
"postId":"13"
},
"query":"mutation DeletePost($postId: ID!) {
postDelete(postId: $postId) {
post {
title
__typename
}
__typename
}
}”
}
Fiddler capture:
Summary
In this article, we explored how to integrate a React front-end with our GraphQL API using Apollo Client.
I hope this was helpful.
See you next time!
