I used for the first time GraphQL a few days ago and i wanted to share with you what i learned.
In this project, we are going to use GraphQL for one of my favorite Tv Shows : Friends !
Let's get started
Create a new project
mkdir mygraphQlApi
cd mygraphQlApi
npm init
We are going to use :
- Koa
npm install koa --save
npm install koa-bodyparser koa-helmet koa-router --save
- Knex and Knex CLI
npm install knex -g
npm install knex@0.13.0 -g
- Postgres
npm install pg --save
- GraphQL
npm install graphql graphql-tools apollo-server-koa --save
Create the Database
We are going to connect to Postgres
sudo -u postgres psql postgres
Then create the database
postgres=# CREATE DATABASE friends;
List your databases to see your new DB just created
postgres=# \list
List of databases
Name | Owner | Encoding | Collate | Ctype | Access privileges
-------------+----------+----------+-------------+-------------+-----------------------
friends | postgres | UTF8 | fr_FR.UTF-8 | fr_FR.UTF-8 |
postgres | postgres | UTF8 | fr_FR.UTF-8 | fr_FR.UTF-8 |
template0 | postgres | UTF8 | fr_FR.UTF-8 | fr_FR.UTF-8 | =c/postgres +
| | | | | postgres=CTc/postgres
template1 | postgres | UTF8 | fr_FR.UTF-8 | fr_FR.UTF-8 | =c/postgres +
| | | | | postgres=CTc/postgres
Finally create a user with a password
CREATE USER myusername WITH PASSWORD 'password';
Connect to your DB
psql -h localhost -d friends -U myusername
Password for user myusername:
friends=>
Everything is fine !
Type \q to quit.
Back to the project
We are going to create a folder called knex and some subfolders for our seeds, migrations and queries.
mkdir knex
mkdir knex/migrations
mkdir knex/seeds
mkdir knex/queries
Then, to store some data, we are goind to create a folder called data, with a cast.js file inside that folder.
mkdir data
cd data
touch cast.js
Initiate the project
knex init
This command will create a file called knex.js
Let's modify the file like this :
module.exports = {
development: {
client: 'pg',
connection: 'postgres://username:password@localhost:5432/database',
migrations: {
directory: __dirname + '/knex/migrations',
},
seeds: {
directory: __dirname + '/knex/seeds'
}
}
};
NB : Replace the username, password and database value with the right ones.
Now your project should look like this
The Database is empty !
For now, you have a database, but with no data ! Let's fix that !
First , let's create a table on the DB.
knex migrate:make cast
Using environment: development
Created Migration: /path/of/your/project/knex/migrations/20210207185018_cast.js
This command is going to create a migration file, let's modify it like this
exports.up = (knex) => Promise.all([
knex.schema.createTable('cast', function(table) {
table.increments();
table.string('firstName').notNullable();
table.string('lastName').notNullable();
table.string('Food').notNullable();
})
]);
exports.down = (knex) => {
return knex.schema.dropTable('cast');
};
Now let's "run" the migration
knex migrate:latest --env development
Using environment: development
Batch 1 run: 1 migrations
Now that we have a table, let's fill it with some data.
We are going to "seed" the table.
knex seed:make cast_seed
Using environment: development
Created seed file:/path/of/your/project/knex/seeds/cast_seed.js
In the data folder, go to your cast.js file and complete it like this :
module.exports = [
{
"firstName": "Chandler",
"lastName": "Bing",
"Food": "Cheesecake"
},
{
"firstName": "Monica",
"lastName": "Geller",
"Food": "Mint Cookies"
},
{
"firstName": "Joey",
"lastName": "Tribiani",
"Food": "Pizza"
}
];
Complete your seed file like this to seed the DB with the data from your file.
const castData = require('../../data/cast');
exports.seed = function(knex) {
// Deletes ALL existing entries
return knex('cast').del()
.then(function () {
// Inserts seed entries
return knex('cast').insert(castData);
});
};
Let's now run this command
knex seed:run --env development
Using environment: development
Ran 1 seed files
Let's connect to the DB, to see our data
psql -h localhost -d friends -U myusername
Password for user myusername:
friends=> SELECT * FROM public.cast;
id | firstName | lastName | Food
----+-----------+----------+-------------
1 | Chandler | Bing | Cheesecake
2 | Monica | Geller | MintCookies
3 | Joey | Tribiani | Pizza
(3 rows)
Congrats, you have now a DB, with a table called cast, and some data in that table!
Next step, the GraphQL part !
GraphQL part
Now let's make the GraphQL part.
Let's create a file called index.js
touch index.js
It should look like this
const Koa = require('koa');
const { ApolloServer, gql } = require('apollo-server-koa');
const queries = require('./knex/queries/queries.js');
const typeDefs = gql`
type Cast {
firstName: String
lastName: String
Food: String
}
type Query {
cast(firstName: String, lastName: String, Food: String): [Cast]
}
`;
const schema = {
typeDefs,
resolvers: {
// Prototypes for GET
Query: {
cast: (_, filters) => queries.getCast(filters),
}
}
}
const server = new ApolloServer(schema);
const app = new Koa();
server.applyMiddleware({ app });
app.listen({ port: 3000 }, () =>
console.log(`🚀 Server ready at http://localhost:3000${server.graphqlPath}`),
);
As you can see line 3, we are using queries , let's create them :
In the knex folder, we created a folder called queries. Let's create a file called queries.js
cd knex/queries
touch queries.js
const knex = require('../connect');
function getCast(filters) {
return knex('cast')
.select('*')
.where(filters);
}
module.exports = {
getCast
};
Let create the connect file used on the first line
cd ../
touch connect.js
const environment = process.env.NODE_ENV || 'development';
const config = require('../knexfile.js')[environment];
module.exports = require('knex')(config);
Now, let's start our server
node index.js
🚀 Server ready at http://localhost:3000/graphql
You should see something like this
Query some data
Let's try to query some data
# Write your query or mutation here
query Everyone {
cast {
firstName
}
}
Click on the Play button
{
"data": {
"cast": [
{
"firstName": "Chandler"
},
{
"firstName": "Monica"
},
{
"firstName": "Joey"
}
]
}
}
Tadaaaam ! You have made your first query with GraphQL !
Let's add some characters
But wait a minute ... where is Ross ? and Rachel ? And Phoebe ?
We need to add them to our database.
Let's use Mutations for that.
In your index.js file, let's update the schema to add Mutations
# index.js
const typeDefs = gql`
type Cast {
firstName: String
lastName: String
Food: String
}
type Query {
cast(firstName: String, lastName: String, Food: String): [Cast]
}
type Mutation {
addSomeone(firstName: String, lastName: String, Food: String): [Cast]
}
`;
const schema = {
typeDefs,
resolvers: {
// Prototypes for GET
Query: {
cast: (_, filters) => queries.getCast(filters),
},
// Prototypes for PUT
Mutation: {
addSomeone: async (_, cast) => {
const newOne = await queries.addSomeone(cast);
return newOne;
}
}
}
}
Then in the queries.js file, let's create the actual queries for those mutations.
# queries.js
const knex = require('../connect');
function getCast(filters) {
return knex('cast')
.select('*')
.where(filters);
}
function addSomeone(cast) {
return knex('cast')
.insert({
firstName: cast.firstName,
lastName: cast.lastName,
Food: cast.Food
})
.returning('*');
}
module.exports = {
getCast,
addSomeone
};
Restart our server and write a Mutation to add Ross
mutation addRoss{
addSomeone(firstName: "Ross", lastName: "Geller", Food: "Turkey Sandwich") {
firstName
}
}
Hit the play button
{
"data": {
"addSomeone": [
{
"firstName": "Ross"
}
]
}
}
Let's query all the cast once again
# Write your query or mutation here
query Everyone {
cast {
firstName
}
}
Click on play ... and cross fingers
{
"data": {
"cast": [
{
"firstName": "Chandler"
},
{
"firstName": "Monica"
},
{
"firstName": "Joey"
},
{
"firstName": "Ross"
}
]
}
}
Yeaaaah ! Now you can add all the others !
Conclusion
I just started learning GraphQL so i probably made some mistakes, i am still figuring out how to make everything work but i wanted to share this first milestone with you !
If you have some tips or resources to help me keep digging the subject, drop them on the comments !
The full code is here on GIthub : Code
Top comments (1)
Awsome Effort Team
Thanks ♥️♥️🙌