Node.js İle GraphQL Server Oluşturma

Yeni Başlayanlar İçin GraphQL yazımı okuduysanız artık örnek bir GraphQL Server projesi yapımına geçebiliriz. GraphQL Server projesi oluşturmak için Node.js ve Apollo kullanacağız, giriş seviyesi Node.js bildiğinizi varsayarak yazıma devam ediyorum.

Başlamadan önce şunu da belirtmeliyim. Bu yazımında GraphQL’in Server tarafını ele alacağız. Oluşturduğumuz GraphQL Server’ın Client tarafında kullanımı ayrı bir konu ve bu daha çok client(web, mobil, vs.) tarafında geliştirme yapanların uzmanlık alanı.

nodejs, npm, nodemon kurulu olduğunu varsayarak projemize başlayabiliriz.

mkdir graphql-demo && cd graphql-demo && npm init -y

ile boş bir dizin oluşturup içerisinde de Node.js projesi oluşturuyoruz.

{
	"name": "graphql-demo",
	"version": "1.0.0",
	"description": "",
	"main": "index.js",
	"scripts": {
		"test": "echo \"Error: no test specified\" && exit 1"
	},
	"keywords": [],
	"author": "",
	"license": "ISC"
}

package.json dosyamız oluştu, şimdi GraphQL için ihtiyacımız olan paketleri de yükleyelim.

npm install apollo-server-express express --save

ile apollo-server-express ‘i de projemize dahil ettik.

mkdir src && touch ./src/server.js

ile bi src dizini oluşturup içerisinde de uygulamamızı entrypoint’i olacak server.js dosyamızı oluşturduk. Şimdi server.js dosyamızı bi IDE ile açarak kodlarımızı yazmaya başlayabiliriz.

const  express = require('express');
const { ApolloServer, gql } = require('apollo-server-express');
// Construct a schema, using GraphQL schema language
const  typeDefs = gql`
  type  Query {
    hello: String
  }
`;
// Provide resolver functions for your schema fields
const  resolvers = {
  Query: {
    hello: () =>  'Hello world!',
  },
};
const  server = new  ApolloServer({ typeDefs, resolvers });
const  app = express();
server.applyMiddleware({ app });
app.listen({ port:  4000 }, () =>
  console.log(`🚀 Server ready at http://localhost:4000${server.graphqlPath}`)
);

Önce express ve apollo-server-express ile gelen ApolloServer ve gql kullanacağımızı belirtiyoruz.

Daha sonra GraphQL schema’mızı ve GraphQL schema için kullanılacak resolvers’ımızı oluşturuyoruz ve bi tane örnek Query ve resolver yazıyoruz. Sonra da ApolloServer ‘dan bir instance’ı GraphQL schema’mızı ve resolver’ımızı verecek oluşturup, middleware olarak da express kullanacağını söylüyoruz.

Son olarak da 4000 port’undan uygulamamızı çalışır hale getiriyoruz. Örnek GraphQL uygulamamız çalışmaya hazır.

Şimdi de package.json dosyamıza bi script ekleyerek uygulamamızı ayağa kaldıralım.

"scripts": {
  "dev": "nodemon ./src/server.js",
  "test": "echo \"Error: no test specified\" && exit 1"
},

artık uygulamamızın ayağa kalkması için her şey hazır, tek yapmamız gereken terminal’den aşağıdaki komutu çalıştırmak.

npm run dev

Sonuç;

> graphql-demo@1.0.0 dev /Users/nurettintopal/WorkOn/Projects/graphql-demo
> nodemon ./src/server.js
[nodemon] 2.0.1
[nodemon] to restart at any time, enter `rs`
[nodemon] watching dir(s): *.*
[nodemon] watching extensions: js,mjs,json
[nodemon] starting `node ./src/server.js`
🚀 Server ready at http://localhost:4000/graphql

Artık çalışan bir GraphQL uygulamamız var. Bi tarayıcı üzerinden aşağıki URL’i açarsak GraphQL Playgrorund açılacaktır ve sorgularımızı yapabilir hale geleceğiz.

http://localhost:4000/graphql

Sonuç;

hello

Şu ana kadar her şey tamam, peki API ‘den verileri nasıl çekiyoruz?

Artık uygulamamız çalışır halde, API işlemleri için ilk önce projemize axios paketini dahil ediyoruz ki API isteklerini bu paket üzerinden yapabilelim.

npm install axios --save

server.js dosyamızı açıp, en üst bölüme axios’u import ederek başlıyoruz.

const  axios = require('axios');

sonra da GraphQL schema’mızı değiştiriyoruz, artık API’nin yapısına uygun bir hale getireceğiz.

Bi tane User type’ımız, bir tane Users type’ımız ve bir tane de Query type’ımız olacak.

// Construct a schema, using GraphQL schema language
const  typeDefs = gql`
  type  Users {
    page: Int
    per_page: Int
    total: Int
    total_pages: Int
    data: [User]
  }
  type  User {
    id: Int
    email: String
    first_name: String
    last_name: String
    avatar: String
  }
  type  Query {
    users: Users
  }
`;

Şimdi de users Query’si için bi resolver tanımlamamız lazım ve bu resolver içerisinde axios ile API isteği yaparak istenilen veriyi almamız gerekiyor.

// Provide resolver functions for your schema fields
const  resolvers = {
  Query: {
    users:  async () => {
      let  response = null;
      try {
        response = await  axios.get('https://reqres.in/api/users');
        return  response.data;
      } catch (error) {
        console.error(error);
        return;
      }
    }
  },
};

Artık users Query’si atıldığı zaman yukarıdaki resolver devreye girecek ve API’den veriler çekilecek.

users

users Query’mizin çalıştığını gördük, şimdi de bi tane Mutation örneği yaparak devam edelim.

Bi tane UserInput type’ımız olacak bunu dışarıdan alacağız, bir tane de Mutation type’ımız olacak. Bunlar dışında zaten Query’de kullanmış olduğumuz User type’ımız vardı, onu da response type olarak kullanacağız.

input  UserInput {
  email: String
  first_name: String
  last_name: String
  avatar: String
}
type  Mutation {
  userCreate(input: UserInput): User
}

gql’imizi güncelledik, şimdi de resolver’ımızı güncelleyelim.

Mutation: {
  userCreate:  async (root, {input}) => {
    let  response = null;
    try {
      response = await  axios.post('https://reqres.in/api/users', input);
      return  response.data;
    } catch (error) {
      console.error(error);
      return;
    }
  }
}

Artık playground üzerinden userCreate Mutation sorgumuzu atabiliriz.

userCreate

Evet, her şey yolunda.

Artık siz de kendi projelerinizde kullanmaya başlayabilirsiniz. server.js dosyamızın son halini de paylaşıyorum.

const  express = require('express');
const { ApolloServer, gql } = require('apollo-server-express');
const  axios = require('axios');
// Construct a schema, using GraphQL schema language
const  typeDefs = gql`
  input  UserInput {
    email: String
    first_name: String
    last_name: String
    avatar: String
  }
  type  Users {
    page: Int
    per_page: Int
    total: Int
    total_pages: Int
    data: [User]
  }
  type  User {
    id: Int
    email: String
    first_name: String
    last_name: String
    avatar: String
  }
  type  Query {
    users: Users
  }
  type  Mutation {
    userCreate(input: UserInput): User
  }
`;
// Provide resolver functions for your schema fields
const  resolvers = {
  Query: {
    users:  async () => {
      let  response = null;
      try {
        response = await  axios.get('https://reqres.in/api/users');
        return  response.data;
      } catch (error) {
        console.error(error);
        return;
      }
    }
  },
  Mutation: {
    userCreate:  async (root, {input}) => {
      let  response = null;
      try {
        response = await  axios.post('https://reqres.in/api/users', input);
        return  response.data;
      } catch (error) {
        console.error(error);
        return;
      }
    }
  }
};
const  server = new  ApolloServer({ typeDefs, resolvers });
const  app = express();
server.applyMiddleware({ app });
app.listen({ port:  4000 }, () =>
  console.log(`🚀 Server ready at http://localhost:4000${server.graphqlPath}`)
);

Yukarıdaki adımları takip ederek kendi GraphQL projenizi oluşturabilir ya da yukarıdaki adımları direk geçerek aşağıdaki GitHub reposunu indirerek hemen uygulamanızı geliştirmeye başlayabilirsiniz.

https://github.com/nurettintopal/nodejs-graphql-server

Umarım faydalı olmuştur…