Building a Trello-Like App with React Hooks and GraphQL

Understanding the Entities

Before we dive into the code, let’s take a look at the two main entities involved in our application:

• Section: A section contains all the cards. Users create a section and add cards inside it.
• Card: Cards contain all the task details. Users create a card and store all the task details inside it.

Setting Up the Backend

To build our backend, we’ll need the following dependencies:

• apollo-server-express: Connects the Apollo GraphQL server with ExpressJS
• express: A Node.js framework to run the server
• mongoose: Connects the Express server with MongoDB
• lodash: A JavaScript utility library

Once we’ve installed these dependencies, let’s create our GraphQL server. We’ll define our type definitions and resolvers for the Apollo GraphQL server.

Type Definitions

Our type definitions contain all the GraphQL schema definitions. We have two entities: Section and Card. Each entity should be defined as a Type. GraphQL has two root types: Query and Mutation. Query handles all the fetch operations, including GET requests and REST API protocols. Mutation handles data manipulation, which is the POST request in the REST API.

type Section {
  id: ID!
  name: String!
  cards: [Card!]!
}

type Card {
  id: ID!
  title: String!
  description: String
}

Resolvers

Resolvers resolve the Type we defined in the schema. For example, if we define a query type in the schema, it should be resolved in the resolver.

const resolvers = {
  Query: {
    sections: async () => {
      // Fetch all sections from database
    },
  },
};

Connecting to MongoDB

We’ll use the Mongoose connect method to connect our server with the MongoDB database.

mongoose.connect('mongodb://localhost/trello', { useNewUrlParser: true, useUnifiedTopology: true });

Creating the GraphQL Server

Now that we’ve set up our backend, let’s create our GraphQL server and run it.

const server = new ApolloServer({ typeDefs, resolvers });
server.listen().then(({ url }) => {
  console.log(`Server ready at ${url}`);
});

Frontend

Now that we’ve set up our backend, let’s build the frontend of our application using React Hooks.

We’ll need the following dependencies:

• @apollo/react-hooks: Handles GraphQL operations, such as query, mutation, and subscriptions using React Hooks
• GraphQL: Needed to run GraphQL on the client-side
• react-smooth-dnd: Handles drag and drop functionality in our React application
• styled-components: We’ll use styled components in our application

Components in React

We’ll create the Board component, which will render the cards and sections. We’ll use React Hooks to fetch data from the GraphQL server and update the state.

import React, { useState, useEffect } from 'react';
import { useQuery, gql } from '@apollo/react-hooks';

const BOARD_QUERY = gql`
  query Board {
    sections {
      id
      name
      cards {
        id
        title
        description
      }
    }
  }
`;

function Board() {
  const { data, loading, error } = useQuery(BOARD_QUERY);
  const [sections, setSections] = useState([]);

  useEffect(() => {
    if (data) {
      setSections(data.sections);
    }
  }, [data]);

  // Render sections and cards
}

Drag and Drop

We’ll integrate drag and drop functionality into our application using the react-smooth-dnd library.

import { Draggable } from 'react-smooth-dnd';

function Card() {
  return (
    
      // Render card content
    
  );
}

Note that this is just a partial implementation, and you’ll need to complete the rest of the application yourself.