Final Mini Proejct (Guided) - BlogExplorer - React, Redux, React-Redux, Redux Thunk, Axios, GraphQL (Apollo Client), and mock APIs #250

akash-coded · 2024-08-14T06:19:21Z

akash-coded
Aug 14, 2024
Maintainer

This is a guided capstone mini-project that incorporates React, Redux, React-Redux, Redux Thunk, Axios, GraphQL (Apollo Client), and the mentioned mock APIs. This project will focus on building a blog application with posts and comments, demonstrating how to query data from both REST and GraphQL APIs.

Project: BlogExplorer

Overview:
BlogExplorer is a React application that fetches blog posts from a REST API and comments from a GraphQL API. Users can view posts, click on a post to see its details and comments, and add new comments.

Step 1: Project Setup

First, create a new React project using Create React App:

npx create-react-app blog-explorer
cd blog-explorer

Install the necessary dependencies:

npm install redux react-redux redux-thunk axios @apollo/client graphql

Step 2: Project Structure

Organize your project structure as follows:

src/
  components/
    PostList.js
    PostDetail.js
    CommentList.js
    CommentForm.js
  redux/
    actions/
      postActions.js
      commentActions.js
    reducers/
      postReducer.js
      commentReducer.js
      rootReducer.js
    store.js
  graphql/
    queries.js
  App.js
  index.js

Step 3: Setting up Redux

Create the Redux store in src/redux/store.js:

import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from './reducers/rootReducer';

const store = createStore(rootReducer, applyMiddleware(thunk));

export default store;

Create the root reducer in src/redux/reducers/rootReducer.js:

import { combineReducers } from 'redux';
import postReducer from './postReducer';
import commentReducer from './commentReducer';

const rootReducer = combineReducers({
  posts: postReducer,
  comments: commentReducer,
});

export default rootReducer;

Step 4: Implementing Post Functionality

Create the post reducer in src/redux/reducers/postReducer.js:

const initialState = {
  posts: [],
  loading: false,
  error: null,
};

const postReducer = (state = initialState, action) => {
  switch (action.type) {
    case 'FETCH_POSTS_REQUEST':
      return { ...state, loading: true };
    case 'FETCH_POSTS_SUCCESS':
      return { ...state, loading: false, posts: action.payload };
    case 'FETCH_POSTS_FAILURE':
      return { ...state, loading: false, error: action.payload };
    default:
      return state;
  }
};

export default postReducer;

Create post actions in src/redux/actions/postActions.js:

import axios from 'axios';

export const fetchPosts = () => async (dispatch) => {
  dispatch({ type: 'FETCH_POSTS_REQUEST' });
  try {
    const response = await axios.get('https://jsonplaceholder.typicode.com/posts');
    dispatch({ type: 'FETCH_POSTS_SUCCESS', payload: response.data });
  } catch (error) {
    dispatch({ type: 'FETCH_POSTS_FAILURE', payload: error.message });
  }
};

Step 5: Implementing Comment Functionality with GraphQL

Set up Apollo Client in src/index.js:

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { ApolloClient, InMemoryCache, ApolloProvider } from '@apollo/client';
import store from './redux/store';
import App from './App';

const client = new ApolloClient({
  uri: 'https://graphqlzero.almansi.me/api',
  cache: new InMemoryCache(),
});

Certainly, I'll continue from where we left off:

```javascript
ReactDOM.render(
  <Provider store={store}>
    <ApolloProvider client={client}>
      <App />
    </ApolloProvider>
  </Provider>,
  document.getElementById('root')
);

Create GraphQL queries in src/graphql/queries.js:

import { gql } from '@apollo/client';

export const GET_COMMENTS = gql`
  query GetComments($postId: ID!) {
    post(id: $postId) {
      comments {
        data {
          id
          name
          email
          body
        }
      }
    }
  }
`;

export const ADD_COMMENT = gql`
  mutation AddComment($input: CreateCommentInput!) {
    createComment(input: $input) {
      id
      name
      email
      body
    }
  }
`;

Create the comment reducer in src/redux/reducers/commentReducer.js:

const initialState = {
  comments: [],
  loading: false,
  error: null,
};

const commentReducer = (state = initialState, action) => {
  switch (action.type) {
    case 'FETCH_COMMENTS_REQUEST':
      return { ...state, loading: true };
    case 'FETCH_COMMENTS_SUCCESS':
      return { ...state, loading: false, comments: action.payload };
    case 'FETCH_COMMENTS_FAILURE':
      return { ...state, loading: false, error: action.payload };
    case 'ADD_COMMENT_SUCCESS':
      return { ...state, comments: [...state.comments, action.payload] };
    default:
      return state;
  }
};

export default commentReducer;

Create comment actions in src/redux/actions/commentActions.js:

import { client } from '../../index';
import { GET_COMMENTS, ADD_COMMENT } from '../../graphql/queries';

export const fetchComments = (postId) => async (dispatch) => {
  dispatch({ type: 'FETCH_COMMENTS_REQUEST' });
  try {
    const { data } = await client.query({
      query: GET_COMMENTS,
      variables: { postId },
    });
    dispatch({ type: 'FETCH_COMMENTS_SUCCESS', payload: data.post.comments.data });
  } catch (error) {
    dispatch({ type: 'FETCH_COMMENTS_FAILURE', payload: error.message });
  }
};

export const addComment = (input) => async (dispatch) => {
  try {
    const { data } = await client.mutate({
      mutation: ADD_COMMENT,
      variables: { input },
    });
    dispatch({ type: 'ADD_COMMENT_SUCCESS', payload: data.createComment });
  } catch (error) {
    console.error('Error adding comment:', error);
  }
};

Step 6: Creating React Components

Create src/components/PostList.js:

import React, { useEffect } from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { fetchPosts } from '../redux/actions/postActions';

const PostList = ({ onSelectPost }) => {
  const dispatch = useDispatch();
  const { posts, loading, error } = useSelector((state) => state.posts);

  useEffect(() => {
    dispatch(fetchPosts());
  }, [dispatch]);

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

  return (
    <div>
      <h2>Blog Posts</h2>
      <ul>
        {posts.map((post) => (
          <li key={post.id} onClick={() => onSelectPost(post.id)}>
            {post.title}
          </li>
        ))}
      </ul>
    </div>
  );
};

export default PostList;

Create src/components/PostDetail.js:

Let's continue with the PostDetail.js component and the remaining components:

import React from 'react';
import { useSelector } from 'react-redux';
import CommentList from './CommentList';
import CommentForm from './CommentForm';

const PostDetail = ({ postId }) => {
  const post = useSelector((state) =>
    state.posts.posts.find((p) => p.id === postId)
  );

  if (!post) return <div>No post selected</div>;

  return (
    <div>
      <h2>{post.title}</h2>
      <p>{post.body}</p>
      <CommentList postId={postId} />
      <CommentForm postId={postId} />
    </div>
  );
};

export default PostDetail;

Create src/components/CommentList.js:

import React, { useEffect } from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { fetchComments } from '../redux/actions/commentActions';

const CommentList = ({ postId }) => {
  const dispatch = useDispatch();
  const { comments, loading, error } = useSelector((state) => state.comments);

  useEffect(() => {
    dispatch(fetchComments(postId));
  }, [dispatch, postId]);

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

  return (
    <div>
      <h3>Comments</h3>
      <ul>
        {comments.map((comment) => (
          <li key={comment.id}>
            <strong>{comment.name}</strong> ({comment.email})
            <p>{comment.body}</p>
          </li>
        ))}
      </ul>
    </div>
  );
};

export default CommentList;

Create src/components/CommentForm.js:

import React, { useState } from 'react';
import { useDispatch } from 'react-redux';
import { addComment } from '../redux/actions/commentActions';

const CommentForm = ({ postId }) => {
  const dispatch = useDispatch();
  const [name, setName] = useState('');
  const [email, setEmail] = useState('');
  const [body, setBody] = useState('');

  const handleSubmit = (e) => {
    e.preventDefault();
    dispatch(addComment({ postId, name, email, body }));
    setName('');
    setEmail('');
    setBody('');
  };

  return (
    <form onSubmit={handleSubmit}>
      <h3>Add a Comment</h3>
      <input
        type="text"
        placeholder="Name"
        value={name}
        onChange={(e) => setName(e.target.value)}
        required
      />
      <input
        type="email"
        placeholder="Email"
        value={email}
        onChange={(e) => setEmail(e.target.value)}
        required
      />
      <textarea
        placeholder="Comment"
        value={body}
        onChange={(e) => setBody(e.target.value)}
        required
      ></textarea>
      <button type="submit">Add Comment</button>
    </form>
  );
};

export default CommentForm;

Step 7: Updating App.js

Update src/App.js to use the components:

import React, { useState } from 'react';
import PostList from './components/PostList';
import PostDetail from './components/PostDetail';

function App() {
  const [selectedPostId, setSelectedPostId] = useState(null);

  return (
    <div className="App">
      <h1>BlogExplorer</h1>
      <div style={{ display: 'flex' }}>
        <div style={{ flex: 1 }}>
          <PostList onSelectPost={setSelectedPostId} />
        </div>
        <div style={{ flex: 2 }}>
          {selectedPostId && <PostDetail postId={selectedPostId} />}
        </div>
      </div>
    </div>
  );
}

export default App;

Step 8: Running the Application

Now that we have set up all the components and Redux store, you can run the application:

npm start

This will start the development server, and you should be able to see the BlogExplorer application in your browser.

Final Notes and Best Practices:

Code Organization: We've organized the code into logical folders (components, redux, graphql) to maintain a clean project structure.
Component Separation: Each component has a single responsibility, making the code more maintainable and easier to understand.
Redux Usage: We're using Redux for global state management, with separate actions and reducers for posts and comments.
GraphQL Integration: We've integrated Apollo Client for GraphQL queries and mutations, demonstrating how to use it alongside Redux.
Error Handling: Basic error handling is implemented in the reducers and components to improve user experience.
Async Operations: We're using Redux Thunk for handling asynchronous operations in our action creators.
React Hooks: We've used various React hooks (useState, useEffect, useSelector, useDispatch) to manage state and side effects in functional components.
Prop Types: For a production application, you should add PropTypes to your components for better type checking.
Styling: This example doesn't include CSS. In a real-world application, you'd want to add proper styling, possibly using CSS modules or a CSS-in-JS solution.
Testing: For a complete project, you should add unit tests for your components and integration tests for your Redux logic.
Performance Optimization: For larger applications, consider implementing performance optimizations like memoization (React.memo, useMemo, useCallback) where appropriate.

This mini-project demonstrates the integration of React, Redux, and GraphQL, providing a practical example of how these technologies can work together in a real-world scenario. It shows how to fetch data from both REST and GraphQL APIs, manage global state with Redux, and update the UI based on user interactions.

To further expand this project, you could add features like pagination for posts and comments, implement a search functionality, or add user authentication. These additions would provide even more opportunities to practice with these technologies and explore more advanced concepts.