Guided Mini Project 2 - React with GraphQL - GraphQL Blog Manager - Mutations with GraphQLZero using Apollo Client

[akash-coded]

This is a follow-up project focusing on mutations using React and Apollo Client with the GraphQLZero API. This project will build upon the previous one #248 , adding features to create, update, and delete posts.

Project: Interactive Blog Management System

In this mini-project, we'll extend our blog explorer to include functionality for managing posts through GraphQL mutations.

Step 1: Set up the project

If you're continuing from the previous project, you can skip this step. Otherwise, set up a new React project and install dependencies:

npx create-react-app graphql-blog-manager
cd graphql-blog-manager
npm install @apollo/client graphql

Ensure your Apollo Client is set up as in the previous project.

Step 2: Create a new PostForm component

Create a new file src/components/PostForm.js:

import React, { useState } from 'react';
import { useMutation, gql } from '@apollo/client';

const CREATE_POST = gql`
  mutation CreatePost($input: CreatePostInput!) {
    createPost(input: $input) {
      id
      title
      body
    }
  }
`;

function PostForm({ onPostCreated }) {
  const [title, setTitle] = useState('');
  const [body, setBody] = useState('');

  const [createPost, { loading, error }] = useMutation(CREATE_POST, {
    onCompleted: (data) => {
      onPostCreated(data.createPost);
      setTitle('');
      setBody('');
    },
  });

  const handleSubmit = (e) => {
    e.preventDefault();
    createPost({ variables: { input: { title, body } } });
  };

  if (loading) return <p>Submitting...</p>;
  if (error) return <p>Error: {error.message}</p>;

  return (
    <form onSubmit={handleSubmit}>
      <h3>Create New Post</h3>
      <input
        type="text"
        value={title}
        onChange={(e) => setTitle(e.target.value)}
        placeholder="Title"
        required
      />
      <textarea
        value={body}
        onChange={(e) => setBody(e.target.value)}
        placeholder="Body"
        required
      />
      <button type="submit">Create Post</button>
    </form>
  );
}

export default PostForm;

This component demonstrates how to use the useMutation hook to create a new post [citation:5][citation:6].

Step 3: Update PostList to include deletion

Modify the PostList component to include a delete button for each post:

import React, { useState } from 'react';
import { useQuery, useMutation, gql } from '@apollo/client';

const GET_POSTS = gql`
  query GetPosts($page: Int!) {
    posts(options: { paginate: { page: $page, limit: 5 } }) {
      data {
        id
        title
        user {
          id
          name
        }
      }
      meta {
        totalCount
      }
    }
  }
`;

const DELETE_POST = gql`
  mutation DeletePost($id: ID!) {
    deletePost(id: $id)
  }
`;

function PostList({ onSelectUser, onSelectPost }) {
  const [currentPage, setCurrentPage] = useState(1);
  const { loading, error, data, refetch } = useQuery(GET_POSTS, {
    variables: { page: currentPage },
  });

  const [deletePost] = useMutation(DELETE_POST, {
    onCompleted: () => refetch(),
  });

  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error: {error.message}</p>;

  const totalPages = Math.ceil(data.posts.meta.totalCount / 5);

  const handleDelete = (id) => {
    if (window.confirm('Are you sure you want to delete this post?')) {
      deletePost({ variables: { id } });
    }
  };

Let's continue with the PostList component:

  return (
    <div>
      <h2>Posts</h2>
      <ul>
        {data.posts.data.map(post => (
          <li key={post.id}>
            <span onClick={() => onSelectPost(post.id)}>{post.title}</span> by{' '}
            <button onClick={() => onSelectUser(post.user.id)}>
              {post.user.name}
            </button>
            <button onClick={() => handleDelete(post.id)}>Delete</button>
          </li>
        ))}
      </ul>
      <div>
        <button 
          onClick={() => setCurrentPage(prev => Math.max(prev - 1, 1))}
          disabled={currentPage === 1}
        >
          Previous
        </button>
        <span> Page {currentPage} of {totalPages} </span>
        <button 
          onClick={() => setCurrentPage(prev => Math.min(prev + 1, totalPages))}
          disabled={currentPage === totalPages}
        >
          Next
        </button>
      </div>
    </div>
  );
}

export default PostList;

This updated PostList component now includes a delete button for each post, demonstrating how to use mutations for deletion [citation:5][citation:6].

Step 4: Create an EditPostForm component

Create a new file src/components/EditPostForm.js:

import React, { useState, useEffect } from 'react';
import { useMutation, gql } from '@apollo/client';

const UPDATE_POST = gql`
  mutation UpdatePost($id: ID!, $input: UpdatePostInput!) {
    updatePost(id: $id, input: $input) {
      id
      title
      body
    }
  }
`;

function EditPostForm({ post, onPostUpdated }) {
  const [title, setTitle] = useState(post.title);
  const [body, setBody] = useState(post.body);

  const [updatePost, { loading, error }] = useMutation(UPDATE_POST, {
    onCompleted: (data) => {
      onPostUpdated(data.updatePost);
    },
  });

  useEffect(() => {
    setTitle(post.title);
    setBody(post.body);
  }, [post]);

  const handleSubmit = (e) => {
    e.preventDefault();
    updatePost({ variables: { id: post.id, input: { title, body } } });
  };

  if (loading) return <p>Updating...</p>;
  if (error) return <p>Error: {error.message}</p>;

  return (
    <form onSubmit={handleSubmit}>
      <h3>Edit Post</h3>
      <input
        type="text"
        value={title}
        onChange={(e) => setTitle(e.target.value)}
        placeholder="Title"
        required
      />
      <textarea
        value={body}
        onChange={(e) => setBody(e.target.value)}
        placeholder="Body"
        required
      />
      <button type="submit">Update Post</button>
    </form>
  );
}

export default EditPostForm;

This component demonstrates how to use mutations to update an existing post [citation:5][citation:6].

Step 5: Update the App component

Now, let's update the src/App.js file to incorporate our new components:

import React, { useState } from 'react';
import PostList from './components/PostList';
import UserDetails from './components/UserDetails';
import PostForm from './components/PostForm';
import EditPostForm from './components/EditPostForm';
import PostDetails from './components/PostDetails';

Let's continue with the App component:

function App() {
  const [selectedUserId, setSelectedUserId] = useState(null);
  const [selectedPostId, setSelectedPostId] = useState(null);
  const [editingPost, setEditingPost] = useState(null);

  return (
    <div className="App">
      <h1>GraphQL Blog Manager</h1>
      <div style={{ display: 'flex' }}>
        <div style={{ flex: 1 }}>
          <PostForm onPostCreated={() => setSelectedPostId(null)} />
          <PostList 
            onSelectUser={setSelectedUserId} 
            onSelectPost={setSelectedPostId}
          />
        </div>
        <div style={{ flex: 1 }}>
          {selectedUserId && <UserDetails userId={selectedUserId} />}
          {selectedPostId && !editingPost && (
            <PostDetails 
              postId={selectedPostId} 
              onSelectUser={setSelectedUserId}
              onEditPost={setEditingPost}
            />
          )}
          {editingPost && (
            <EditPostForm 
              post={editingPost} 
              onPostUpdated={(updatedPost) => {
                setEditingPost(null);
                setSelectedPostId(updatedPost.id);
              }} 
            />
          )}
        </div>
      </div>
    </div>
  );
}

export default App;

This updated App component now incorporates all our new features: creating, reading, updating, and deleting posts [citation:6].

Step 6: Update PostDetails component

Let's modify the PostDetails component to include an edit button:

import React from 'react';
import { useQuery, gql } from '@apollo/client';

const GET_POST = gql`
  query GetPost($id: ID!) {
    post(id: $id) {
      id
      title
      body
      user {
        id
        name
      }
      comments {
        data {
          id
          name
          body
        }
      }
    }
  }
`;

function PostDetails({ postId, onSelectUser, onEditPost }) {
  const { loading, error, data } = useQuery(GET_POST, {
    variables: { id: postId },
  });

  if (loading) return <p>Loading post details...</p>;
  if (error) return <p>Error: {error.message}</p>;

  const { id, title, body, user, comments } = data.post;

  return (
    <div>
      <h3>{title}</h3>
      <p>{body}</p>
      <p>By: <button onClick={() => onSelectUser(user.id)}>{user.name}</button></p>
      <button onClick={() => onEditPost(data.post)}>Edit Post</button>
      <h4>Comments:</h4>
      <ul>
        {comments.data.map(comment => (
          <li key={comment.id}>
            <strong>{comment.name}</strong>: {comment.body}
          </li>
        ))}
      </ul>
    </div>
  );
}

export default PostDetails;

This update adds an edit button to the post details, allowing users to switch to the edit form [citation:5][citation:6].

Final Steps and Explanation:

1. This project demonstrates the full CRUD (Create, Read, Update, Delete) operations using GraphQL mutations and queries.

2. The PostForm component shows how to create new posts using the useMutation hook.

3. The PostList component now includes a delete functionality, demonstrating how to remove data using GraphQL mutations.

4. The EditPostForm component showcases how to update existing data using mutations.

5. The PostDetails component now includes an edit button, showing how to switch between viewing and editing modes.

6. The App component ties everything together, managing the state of which post is being viewed or edited.

7. Throughout the project, we use the refetch function to update our queries after mutations, ensuring our UI stays in sync with the server data.