Necessary packages
npm init -y
npm i express express-graphql graphql
npm i nodemon -DCreate the file server.js on root
const express = require('express');
const { buildSchema } = require('graphql');
const app = express();
const port = process.env.PORT || 8080;
const courses = require('./courses');
const { graphqlHTTP } = require('express-graphql');
const schema = buildSchema(`
type Course{
id: ID!
title: String!
views: Int
}
type Query{
getCourses: [Course]
getCourse(id: ID!): Course
}
`);
const root = {
getCourses(){
return courses;
},
getCourse({ id }){
console.log(id);
const course = courses.find( (course) => course.id == id)
return course;
}
}
app.get('/', function (req, res) {
res.json(courses);
});
// Middleware
app.use('/graphql', graphqlHTTP({
schema,
rootValue: root,
graphiql: true
}));
app.listen(port, function(){
console.log(`Servidor iniciado en http://localhost:${ port }`);
})Create a mocking data for courses on the courses.js
const courses = [
{ id: "1", title: "Curso de Golang", views: 1200 },
{ id: "2", title: "Curso de GraphQL", views: 1000 }
]
module.exports = courses;Create a script for run server on package.json scripts
"scripts": {
"start": "nodemon server.js"
},Creating a simples Queries on GraphiQL
{
getCourse(id: 1) {
title
}
getCourses{
title
}
}
Example of return
{
"data": {
"getCourse": {
"title": "Curso de Golang"
},
"getCourses": [
{
"title": "Curso de Golang"
},
{
"title": "Curso de GraphQL"
}
]
}
}Creating Queries with query variables
// GraphiQL
query($id:ID!){
getCourse(id:$id){
id
title
views
}
}
// Query variables
{
"id": 2
}Example of return
{
"data": {
"getCourse": {
"id": "2",
"title": "Curso de GraphQL",
"views": 1000
}
}
}Creating a simples Mutations on GraphiQL, this needs specify the word mutation because by default is query and is optional.
mutation {
addCourse(title: "Curso de Express", views: 345) {
title
}
}Response
{
"data": {
"addCourse": {
"title": "Curso de Express"
}
}
}Creating Mutations with query variables, here we need to consider that CourseInput is an Objet
// GraphiQL
mutation($entrada: CourseInput) {
addCourse(input: $entrada){
title
}
}
// Query variables
{
"entrada": {
"title": "Hola Curso de Golang3",
"views": 16111
}
}Example of return
{
"data": {
"addCourse": {
"title": "Hola Curso de Golang3"
}
}
}Creating Mutations for method DELETE
// GraphiQL
mutation($id: ID!) {
deleteCourse(id: $id){
message
}
}
// Query variables
{
"id": 2
}
// o
mutation{
deleteCourse(id: "2"){
message
}
}Example of return
{
"data": {
"deleteCourse": {
"message": "El curso con el id: 2 fue eliminado"
}
}
}
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent