Uku Lele

Posted on Apr 29, 2023 • Edited on Jun 14

Simple full-stack application with GraphQL, Apollo 4, Node.js, Express, React, MongoDB, TypeScript

#graphql #node #mongodb #react

We will create a simple full-stack application. On the client (in the browser), we will display information about users. We will be able to add a user to the database and get user information by user id. On the client side, we will use React, GraphQL, Apollo Client, TypeScript. On the server side we will use GraphQL, Apollo Server 4, TypeScript, Node.js, Express. The data will be stored in the database MongoDB.

Required Software
The computer must have the following software installed:

Beginning
Create a new directory for your app:
mkdir ragnemt-app

Server
Create a server directory under the ragnemt-app directory:
cd ragnemt-app mkdir server

Go to the server directory, create a package.json file
and install Apollo Server and GraphQL:
cd server npm init -y npm i @apollo/server graphql
Install express, body-parser, @types/cors and @types/body-parser:
npm i express body-parser @types/cors @types/body-parser

Install Apollo data source, mongoose for MongoDB:
npm i apollo-datasource-mongodb mongoose

Install TypeScript:
npm i --save-dev typescript @types/node
Create a tsconfig.json file in the server folder. Add the following configuration to the file:

{
    "compilerOptions": {
        "rootDirs": [
            "src"
        ],
        "outDir": "dist",
        "lib": [
            "es2020"
        ],
        "target": "es2020",
        "module": "esnext",
        "moduleResolution": "node",
        "esModuleInterop": true,
        "types": [
            "node"
        ],
    },
    "include": ["src"],
}

Create a src directory under the server directory.
mkdir src cd src

Create a types.ts file in the _src _directory:

import { ObjectId } from 'mongodb';

export interface UserDocument {
  _id?: ObjectId
  username: string
  password: string
  email: string
}

export interface Context {
  loggedInUser: UserDocument
}

Create a schema and convert it to a model. Create a models directory in the src directory. Create a user.ts file in the models directory:

import mongoose, { Schema } from "mongoose";
import { ObjectId } from 'mongodb';

const userSchema = new Schema({
  _id: ObjectId,
  username: String,
  password: String,
  email: String,
});

export const User = mongoose.model("user", userSchema);

Create a dataSources directory in the src directory. Create a users.ts file in the dataSources directory:

import { MongoDataSource } from 'apollo-datasource-mongodb';
import { ObjectId } from 'mongodb';
import { UserDocument, Context } from '../types';

export default class Users extends MongoDataSource<UserDocument, Context> {

  getUsers() {
    return this.collection.find().toArray();
  }

  getUser(userId: ObjectId) {
    return this.collection.findOne({_id: new ObjectId(userId)});
  }

  addUser(username: string, password: string, email: string) {
    return this.collection.insertMany([{username, password, email}]);
  }
}

Create a index.ts file in the directory src and make it look like this:

import mongoose, { ObjectId } from 'mongoose';
import { ApolloServer } from '@apollo/server';
import { expressMiddleware } from '@apollo/server/express4';
import { ApolloServerPluginDrainHttpServer } from '@apollo/server/plugin/drainHttpServer';
import { GraphQLError } from 'graphql';
import express from 'express';
import http from 'http';
import cors from 'cors';
import { User as UserModel } from './models/user.js';
import Users from './dataSources/users.js';
import pkg from 'body-parser';
import { UserDocument } from './types.js';
const { json } = pkg;

await mongoose.connect('mongodb://127.0.0.1:27017/ragnemt');

const app = express();
// Our httpServer handles incoming requests to our Express app.
// Below, we tell Apollo Server to "drain" this httpServer,
// enabling our servers to shut down gracefully.
const httpServer = http.createServer(app);

const typeDefs = `#graphql
  type User {
    _id: ID!
    username: String
    password: String
    email: String
  }
  type Query {
    users: [User]
    user(_id: ID!): User
  }
  type Mutation {
    addUser(username: String, password: String, email: String): User
  }
`;

const resolvers = {
  Query: {
    users: (_parent: any, _args: any, { dataSourses }) => {
      return  dataSourses.users.getUsers();
    },
    user: (_parent: any, { _id }, { dataSourses }) => {
      return dataSourses.users.getUser(_id)
        .then((res: UserDocument) => {
          if (!res) {
            throw new GraphQLError(
              `User with User Id ${_id} does not exist.`
            );
          }
          return res;
        });
    },
  },
  Mutation: {
    addUser: (_parent: any, { username, password, email }, { dataSourses }) => {
      return dataSourses.users.addUser(username, password, email)
        .then((res: { insertedIds: ObjectId[]; }) => ({ _id: res.insertedIds[0], username, password, email }))
    }
  }
}

interface MyContext {
  dataSources?: {
    users: Users;
  };
}

const server = new ApolloServer<MyContext>({
  typeDefs,
  resolvers,
  plugins: [
    // Proper shutdown for the HTTP server.
    ApolloServerPluginDrainHttpServer({ httpServer }),
  ],
});
await server.start();

app.use(
  cors<cors.CorsRequest>(),
  json(),
  expressMiddleware(server, {
    context: async ({ req }) => ({
      token: req.headers.token,
      dataSourses: {
        users: new Users(await UserModel.createCollection())
      }
    }),
  }),
);

app.listen({ port: 4000 }, () => console.log(`🚀 Server ready at http://localhost:4000`))

The structure of the server side of the application:

Add the following changes to package.json file:
"type": "module", "scripts": { "build": "tsc", "start": "nodemon --exec ts-node-esm ./src/index.ts" },
The configuration of the package.json file:

{
  "name": "server",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "type": "module",
  "scripts": {
    "build": "tsc",
    "start": "nodemon --exec ts-node-esm ./src/index.ts"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@apollo/server": "^4.7.0",
    "@types/body-parser": "^1.19.2",
    "@types/cors": "^2.8.13",
    "apollo-datasource-mongodb": "^0.5.4",
    "body-parser": "^1.20.2",
    "express": "^4.18.2",
    "graphql": "^16.6.0",
    "mongoose": "^7.1.0"
  },
  "devDependencies": {
    "@types/node": "^18.16.2",
    "nodemon": "^2.0.22",
    "ts-node": "^10.9.1",
    "typescript": "^5.0.4"
  }
}

Install nodemon and ts-node:
npm i --save-dev nodemon ts-node
Run npm start:

The server side is working!

Client
Create a client directory under the ragnemt-app directory.
Go to the client directory. Start a new Create React App project with TypeScript:
npx create-react-app . --template typescript

Install Apollo Client and GraphQL:
npm i @apollo/client graphql

Change index.tsx to:

import ReactDOM from 'react-dom/client';
import { ApolloClient, InMemoryCache, ApolloProvider } from '@apollo/client';
import './index.css';
import App from './App';

const client = new ApolloClient({
  uri: 'http://localhost:4000/',
  cache: new InMemoryCache(),
});

const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);
root.render(
  <ApolloProvider client={client}>
    <App />
  </ApolloProvider>
);

Change index.css to:

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
    monospace;
}

td,
th {
    border: 1px solid rgb(190, 190, 190);
    padding: 10px;
}

th[scope='col'] {
  background-color: #696969;
  color: #fff;
}

th[scope='row'] {
  background-color: #d7d9f2;
}

td {
    text-align: center;
}

tr:nth-child(even) {
  background-color: #eee;
}

caption {
  padding: 10px;
  /* caption-side: bottom; */
}

table {
  border-collapse: collapse;
  border: 2px solid rgb(200, 200, 200);
  letter-spacing: 1px;
  font-family: sans-serif;
  font-size: 0.8rem;
}

Change App.tsx to:

import AddUser from './components/AddUser';
import GetUsers from './components/GetUsers';
import GetUser from './components/GetUser';
import './App.css';

const App = () => {

  const OnChangeTab = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>, activeTab: string) => {
    const tabcontent = document.getElementsByClassName("tabcontent");
    for (let i = 0; i < tabcontent.length; i++) {
      tabcontent[i].setAttribute("style","display:none");
    }
    const tablinks = document.getElementsByClassName("tablinks");
    for (let i = 0; i < tablinks.length; i++) {
      tablinks[i].className = tablinks[i].className.replace(" active", "");
    }
    document.getElementById(activeTab)?.setAttribute("style","display:block");
    e.currentTarget.className += " active";
  }

  return (
    <>
      <div className="tab">
        <button className="tablinks active" onClick={(e) => OnChangeTab(e, 'Users')}>Users</button>
        <button className="tablinks" onClick={(e) => OnChangeTab(e, 'User')}>User</button>
      </div>
      <div id="Users" className="tabcontent">
        <h3>Users</h3>
        <AddUser />
        <GetUsers />
      </div>

      <div id="User" className="tabcontent" style={{display: 'none'}}>
        <h3>User</h3>
        <GetUser />
      </div>

    </>
  )

}

export default App;

Change App.css to:

/* Style the tab */
.tab {
  overflow: hidden;
  border: 1px solid #ccc;
  background-color: #f1f1f1;
}

/* Style the buttons inside the tab */
.tab button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
  font-size: 17px;
}

/* Change background color of buttons on hover */
.tab button:hover {
  background-color: #ddd;
}

/* Create an active/current tablink class */
.tab button.active {
  background-color: #ccc;
}

/* Style the tab content */
.tabcontent {
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-top: none;
}

Create a graphql directory under the src directory.
Create a queries.ts file in the graphql directory:

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

export const GET_USERS = gql`
query GetUsers {
  users {
    _id
    username
    password
    email
  }
}
`;

export const GET_USER = gql`
query getUser ($id: ID!) {
  user(_id: $id) {
    _id
    username
    email
    password
  }
}
`;

export const ADD_USER = gql`
mutation AddUser($username: String, $password: String, $email: String) {
  addUser(username: $username, password: $password, email: $email){
        username
        password
        email
  }
}
`;

Create a components directory under the src directory.
Create a AddUser.tsx file in the components directory:

import { useMutation } from '@apollo/client';
import {GET_USERS, ADD_USER} from '../graphql/queries';

const AddUser = () => {
    let inputName: HTMLInputElement | null;
    let inputPassword: HTMLInputElement | null;
    let inputEmail: HTMLInputElement | null;

    const [addUser, { loading, error, client }] = useMutation(ADD_USER);

    if (loading) return <p>'Submitting...'</p>;

    return (
      <div>
        {error && <p>`Submission error! ${error.message}`</p>}
        <form
          onSubmit={e => {
            e.preventDefault();
            addUser({
              variables: { username: inputName?.value, password: inputPassword?.value, email: inputEmail?.value },
              refetchQueries: [{ query: GET_USERS }],      
              onError: () => client.refetchQueries({ include: [GET_USERS] })
            });
          }}
        >
          <input
            ref={node => { inputName = node; }}
            placeholder='Name'
            required
          />
          <input
            ref={node => { inputPassword = node; }}
            placeholder='Password'
            required
          />
          <input
            type='email'
            ref={node => { inputEmail = node; }}
            placeholder='Email'
            required
          />
          <button type="submit">Add User</button>
        </form>
      </div>
    );
  }

  export default AddUser;

Create a GetUser.tsx file in the components directory:

import { useLazyQuery } from '@apollo/client';
import { GET_USER } from '../graphql/queries';

const GetUser = () => {
  let inputId: HTMLInputElement | null = null;
  const [getUser, { loading, error, data }] = useLazyQuery(GET_USER);

  if (loading) return <p>'Submitting...'</p>;

  return (
    <div>
      {error && <p>`Submission error! ${error.message}`</p>}
      <form
        onSubmit={e => {
          e.preventDefault();
          getUser({ variables: { id: inputId?.value } })
        }}
      >
        <input
          ref={node => { inputId = node; }}
          placeholder='UserId'
          required
        />
        <button type="submit">Get User</button>
        {data?.user &&
          <table style={{ minWidth: 300 }}>
            <caption>User</caption>
            <tbody>
              <tr>
                <th scope="row">User ID</th>
                <td>{data?.user._id}</td>
              </tr>
              <tr>
                <th scope="row">User name</th>
                <td>{data?.user.username}</td>
              </tr>
              <tr>
                <th scope="row">User email</th>
                <td>{data?.user.email}</td>
              </tr>
            </tbody>
          </table>
        }
        <p></p>


      </form>
    </div>
  );
};

export default GetUser;

Create a GetUsers.tsx file in the components directory:

import { useQuery } from '@apollo/client';
import { GET_USERS } from '../graphql/queries';
const GetUsers = () => {
  const { data, loading, error } = useQuery(GET_USERS);

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

  return (
    <table>
      <caption>Users</caption>
      <thead>
        <tr>
          <th scope="col">User ID</th>
          <th scope="col">User name</th>
          <th scope="col">User email</th>
        </tr>
      </thead>
      <tbody>
        {data.users.map(({ _id, username, email }: { _id: string, username: string, email: string }) => (
          <tr key={_id}>
            <td>{_id}</td>
            <td>{username}</td>
            <td>{email}</td>
          </tr>
        ))}
      </tbody>
    </table>
  )
}

export default GetUsers;

The structure of the client side of the application:

The configuration of the package.json file:

{
  "name": "client",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@apollo/client": "^3.7.13",
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "@types/jest": "^27.5.2",
    "@types/node": "^16.18.25",
    "@types/react": "^18.2.0",
    "@types/react-dom": "^18.2.1",
    "graphql": "^16.6.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "typescript": "^4.9.5",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

Run npm start. We can now view client in the browser: http://localhost:3000

Enter Good Man in the Name field. Enter 123 in the Password field. Enter good_man@gm.net in the Email field. Click the button Add User. The information will be displayed in the users table:

Copy User ID. Go to tab User. Paste User ID in the UserId field. Click the button Get User. User information will be displayed:

Everything is working!

DEV Community

Simple full-stack application with GraphQL, Apollo 4, Node.js, Express, React, MongoDB, TypeScript

Top comments (0)

Read next

How to add loading states with server action and useActionState hook in Nextjs 15 and React 19

Usage of Node.js Cluster vs Worker

React 19 is now stable ! What’s New 👇

การเขียนเทสเพื่อทดสอบโปรเจคแบบ React + Firebase