Building a CRUD application with React, TypeScript, TypeORM, MySQL, GraphQL, and NodeJs | Part A

In building a CRUD application we would need a client and a server, to cut to the chase I will be starting with the server.

To start the project, run

$ yarn init

Press the Enter key for all prompts, ;), I will need to set up Typescript for my project

$ tsc --init

The above to create Typescript configuration file, within the tsconfig.json, uncomment the following
****
Now, it's time to install some packages and dependencies

$ yarn add nodemon cors express express-graphql graphql typeorm mysql2 typescript ts-node dotenv

Then install the types of some of the dependencies

$ yarn add @types/node @types/express @types/cors 

We need to add some script to the package.json so that we can be able to start our application based on certain commands like yarn dev or npm run dev.
Add the following to your package.json

Remember we need to create two folders namely, src and dist incase you can still go back to your tsconfig.json we uncommented out outDir: "dist/" and rootDir: "src/", our written Typescript cannot be understood by the browser so it's transpiled into the output direction(dist folder) of which you should have created by now.

Now, create an index.ts within the src folder as the entry point of our server.
Type in the following code as a starter template

Let's try running the server using the below-updated code

Run

$ yarn dev

Next, we would be connecting our baby server to a database using typeORM, before we do that create a .env file outside your src folder and store your database and other details like this:

Make sure your detail for the above is correct, i.e. it matches your MySQL configuration. In case you don't know how to set up your MySQL, you could watch a YouTube video on that.
Next, we set up our Db creating its folder within the src folder

|-src
   |--- Db
        |--- index.ts

Next, head over to the entry file and add the following code

If your database details are correct, you get the below result

Hooray!! We connected to our Database using TypeORM

Next, we start setting up Graphql for our API, I would implore you to strap your belt well.

To know about Graphql and why it's being used head over to for more details, Now let's cut to the chase.

To include Graphql, create the following folder structure within your src,

Quick rant:

In Graphql, all requests to get data from our database are housed within the Queries folder, Query are more like the GET requests in building REST APIs. The Mutations are replicas of the PUT, PATCH, UPDATE, and DELETE requests in REST APIs, then within the TypeDefs we define attributes contained and can be queried from data stored within the database.

|-src
   | ...
   |-- Schema
         |--- Mutations
                 |---- User.ts
         |--- Queries
                 |---- User.ts
         |--- TypeDefs
                 |---- User.ts
         |--- index.ts

Add the following code within the entry file, but it has to be commented out as we don't yet have our schemas

One quite important thing is to create a table so that we can be able to query and mutate values within our database, first, we create an Entities folder with a User.ts file
Now, enter the below code to create our User table schema:

Now, we need to create our User mutation, queries, and typedef first.
Within the typeDef index file, add the following code

Next, within the Mutation User file, add the following code

args: Specify the parameters that are required to create a user

Next, we need to specify a query for getting all users from the database, Go to your Queries folder and place the following code into your index file:

The new GraphQLList() specifies that we would be receiving a list of types which was defined.

Next, we create our Schema by entering the following code within the index.ts file which is inside the Schema folder

Now, the remaining thing is to uncomment the route we had to our graphql in our entry file

Your final entry index.ts file should look like this

Also, add our Created entity inside the array of entities within our database configuration like this:

You should have your MYSQL running, go to your browser and enter the url:localhost:/graphql
Do you see one cool thing about graphql, we only use one route which is /graphql.

Now, you should see your studio, which looks like this:

Quick notice: Your table is not yet created, to create your table set the synchronize value in your Db configuration to true, after it reflects on your Database set it back to false.

Your MySQL should look like this:

Now, let's add a user to our database from our graphql studio. In graphql we use mutation to effect changes or insertions, let's add a user to our database

The change is effected, as you can see

Now, let's try and query our data from the database
Note: I added two extra records to our database, now let's query them

Also, enabling logging: true will render the SQL statement within your terminal

Exactly what we wanted.

Congratulations you got to the end of part A.