Building a CRUD application with React, TypeScript, TypeORM, MySQL, GraphQL, and NodeJs | Part A
Tags: webdev, javascript, programming, tutorial
Published: 2023-12-06 16:10:45

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
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/iz5vtmhecwdmlrszw2tk.png)****
**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
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/agpwfdvdeiyg0kqgalhl.png)

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k8per4nbeuzhnpdb7o8n.png)
Let's try running the server using the below-updated code

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m2rldv0w415ilijnbi64.png)
Run

```
$ yarn dev
```

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4b46c31wp9zvv8i1m7sb.png)

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:
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jadcufn3h7m58sr2ckms.png)
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
```
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rwiotkol09z85rd2dz7t.png)
Next, head over to the entry file and add the following code

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4wsurdeelcomoi1494op.png)

If your database details are correct, you get the below result
 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gforwhtxeuaf3yquze1a.png)

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 [](https://graphql.org/) 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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a7o8a5klvp2zvy0kps1t.png)

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:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sw9rebj1e4e0bv5d1t0s.png)

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fjzgk7ti8pb3bulkq9di.png)

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fv0cf4v84ldqr4wndaao.png)

**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:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/156w81v04z29mq01klil.png)

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6iq0ihusop4en3lg23tn.png)


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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k5xn1hs81qikrxvbbbc2.png)

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:<port_you_used>/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:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xg8d7yxke04cobrrh3td.png)

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:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4eoq6w82vsf4sl067isw.png)

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ladxatp2sbs3i8w7m4x8.png)

The change is effected, as you can see

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0yv80eiuc9qr1qz04dsq.png)

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jqcgukjenrj2gdu7ivhj.png) 

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y735p7dhc7gexpqp4wns.png)

Exactly what we wanted. 

Congratulations you got to the end of part A.