Hướng dẫn đơn giản về cách tạo máy chủ GraphQL hỗ trợ Node.js và Express
Bắt đầu bằng cách tạo một dự án Node.js mới, nếu bạn chưa thiết lập:
npm init --y
Lệnh này tạo rapackage.json
tệp chúng tôi cần làm việc vớinpm
.
Cài đặt các gói npmexpress
,graphql
vàexpress-graphql
:
npm install express graphql express-graphql
Tạo ra mộtapp.js
và hãy bắt đầu với việc khởi tạobày tỏngười phục vụ:
const express = require('express')
const app = express()
app.listen(3000, () => {
console.log(‘App listening on port 3000’)
})
Bây giờ chúng tôi thêmexpress-graphql
. Đây là mộtphần mềm trung gianvà chúng tôi chỉ áp dụng nó cho một tuyến đường,/graphql
tuyến đường:
const express = require('express')
const graphqlHTTP = require('express-graphql')
const app = express()
app.use(’/graphql’, graphqlHTTP())
app.listen(3000, () => {
console.log(‘App listening on port 3000’)
})
Chúng ta phải chuyển một đối tượng có chứaschema
thuộc tính phải chứa mộtlược đồĐịnh nghĩa.
Chúng ta phải xác định một lược đồ trước!
Tạo mộtschema.js
và trong đó trước tiên chúng tôi yêu cầugraphql
, sau đó sử dụngcú pháp cấu trúc đối tượngchúng tôi nhận đượcGraphQLSchema
,GraphQLObjectType
vàGraphQLString
các đối tượng mà chúng ta sẽ sớm cần sử dụng:
const graphql = require('graphql')
const { GraphQLSchema, GraphQLObjectType, GraphQLString } = graphql
Sau đó, chúng tôi xác định giá trị giản đồ bằng cách khởi tạo mộtGraphQLSchema
ví dụ, truyền một đối tượng có chứaquery
bất động sản. Thuộc tính này là một ví dụ của mộtGraphQLObjectType
vật:
const schema = new GraphQLSchema({
query: new GraphQLObjectType({
//...
}),
})
module.exports = schema
Bên trong đối tượng mới này, chúng ta phải chỉ định mộtname
, và mộtfields
thông số. Thuộc tính cuối cùng này là một đối tượng chứa một tập hợp các thuộc tính, một thuộc tính cho mỗi trường trong lược đồ của chúng ta. Trong ví dụ này, chúng tôi thiết lập mộthello
cánh đồng:
const schema = new GraphQLSchema({
query: new GraphQLObjectType({
name: 'RootQueryType',
fields: {
hello: {
type: GraphQLString,
resolve() {
return 'world'
},
},
},
}),
})
Cácresolve()
phương thức trả về chuỗiworld
, có nghĩa là khi nào chúng tôi sẽ yêu cầuhello
trường, chúng tôi sẽ lấy lại chuỗi đó.
Đây là đầy đủschema.js
nội dung tệp:
const graphql = require('graphql')
const { GraphQLSchema, GraphQLObjectType, GraphQLString } = graphql
const schema = new GraphQLSchema({
query: new GraphQLObjectType({
name: ‘RootQueryType’,
fields: {
hello: {
type: GraphQLString,
resolve() {
return ‘world’
},
},
},
}),
})
module.exports = schema
Bây giờ chúng ta hãy quay trở lạiapp.js
tập tin.
Đây là những gì chúng tôi đã có:
const express = require('express')
const graphqlHTTP = require('express-graphql')
const app = express()
app.use(’/graphql’, graphqlHTTP())
app.listen(3000, () => {
console.log(‘App listening on port 3000’)
})
Bây giờ chúng tôi yêu cầuschema.js
tập tin:
const schema = require('./schema.js')
và chúng tôi thêm điều đó vào một đối tượng mà chúng tôi chuyển đếngraphqlHTTP()
constructor:
app.use(
'/graphql',
graphqlHTTP({
schema: schema,
})
)
Đồng ý!
Bây giờ chúng tôi có thể kiểm tra điều này và xem liệu nó có hoạt động hay không. Chúng ta có thể sử dụngGraphiQL, một công cụ tuyệt vời để kiểm tra API GraphQL của chúng tôi.
Nó đã được cài đặt và để kích hoạt điều đó, chúng tôi cần chuyển một thuộc tính khác chographqlHTTP
constructor:
app.use(
'/graphql',
graphqlHTTP({
schema: schema,
graphiql: true,
})
)
Bây giờ sau khi bạn chạynode app.js
, truy cập vàohttp://localhost:3000/graphql
URL với trình duyệt, bạn sẽ thấy GraphiQL đang hoạt động:
Và bạn có thể kiểm tra lệnh gọi API đầu tiên, chuyển truy vấn này:
{
hello
}
Đây là kết quả:
Bây giờ chúng ta hãy xây dựng một lược đồ phức tạp hơn.
Một trong đó có các loại lồng nhau.
Một ví dụ mà tôi có trong đầu là một bài đăng trên blog.
Một bài đăng trên blog có tiêu đề, mô tả và nó cũng có tác giả. Tác giả có tên.
Hãy tìm hiểu điều này.
Đầu tiên, chúng tôi thêm tập hợp các bài đăng và tác giả:
const posts = [
{
title: 'First post',
description: 'Content of the first post',
author: 'Flavio',
},
{
title: 'Second post',
description: 'Content of the second post',
author: 'Roger',
},
]
const authors = {
Flavio: {
name: ‘Flavio’,
age: 36,
},
Roger: {
name: ‘Roger’,
age: 7,
},
}
Đây là nơi chúng tôi sẽ lấy dữ liệu từ đó.
Next, we define 3 GraphQLObjectType
các trường hợp:
authorType
, xác định dữ liệu tác giảpostType
, xác định dữ liệu bài đăngqueryType
, cái chính
Hãy bắt đầu với tác giả. Một tác giả có tên và tuổi.
Chúng tôi sử dụngGraphQLInt
loại mà chúng ta phải thêm vào yêu cầu:
const { GraphQLSchema, GraphQLObjectType, GraphQLString, GraphQLInt } = graphql
//…
const authorType = new GraphQLObjectType({
name: ‘Author’,
fields: {
name: {
type: GraphQLString,
},
age: {
type: GraphQLInt,
},
},
})
Tiếp theo làpostType
. Một bài đăng có tiêu đề, mô tả (cả hai chuỗi) và tác giả. Một tác giả thuộc loạiauthorType
, mà chúng tôi vừa xác định và nó có một trình phân giải.
Chúng tôi lấy tên tác giả từsource
tham số, là các tham số được truyền cho đối tượng bài đăng và chúng tôi tra cứu dữ liệu tác giả dựa trên đó. Chúng tôi trả lại nó.
const postType = new GraphQLObjectType({
name: 'Post',
fields: {
title: {
type: GraphQLString,
},
description: {
type: GraphQLString,
},
author: {
type: authorType,
resolve: (source, params) => {
return authors[source.author]
},
},
},
})
Lưu ý rằng một chức năng phân giải có thể không đồng bộ, vì vậy bạn có thể sử dụng async / await để tra cứu tài nguyên từ cơ sở dữ liệu hoặc mạng.
Tiếp theo là queryType, kiểu gốc mà chúng ta sẽ thêm vào lược đồ. Trong đó, chúng tôi xác định 2 trường:
post
một bài đăng blog duy nhất, được xác định bởi một idposts
danh sách các bài viết
cả hai đều có chức năng phân giải để tra cứu dữ liệu trongposts
mảng:
const queryType = new GraphQLObjectType({
name: 'Query',
fields: {
post: {
type: postType,
args: {
id: { type: GraphQLInt },
},
resolve: (source, { id }) => {
return posts[id]
},
},
posts: {
type: new GraphQLList(postType),
resolve: () => {
return posts
},
},
},
})
Chú ý cái mớiGraphQLList
loại, mà chúng tôi sử dụng để bọcpostType
nghĩa là đó là danh sáchpostType
các đối tượng. Chúng ta phải yêu cầu nó ở trên cùng:
const {
GraphQLSchema,
GraphQLObjectType,
GraphQLString,
GraphQLList,
GraphQLInt,
} = graphql
Đó là nó. Chúng tôi cần thêm nó vàoschema
và chúng tôi đã thiết lập:
const schema = new GraphQLSchema({
query: queryType,
})
Đây là mã đầy đủ:
const graphql = require('graphql')
const {
GraphQLSchema,
GraphQLObjectType,
GraphQLString,
GraphQLList,
GraphQLInt,
} = graphql
const posts = [
{
title: ‘First post’,
description: ‘Content of the first post’,
author: ‘Flavio’,
},
{
title: ‘Second post’,
description: ‘Content of the second post’,
author: ‘Roger’,
},
]
const authors = {
Flavio: {
name: ‘Flavio’,
age: 36,
},
Roger: {
name: ‘Roger’,
age: 7,
},
}
const authorType = new GraphQLObjectType({
name: ‘Author’,
fields: {
name: {
type: GraphQLString,
},
age: {
type: GraphQLInt,
},
},
})
const postType = new GraphQLObjectType({
name: ‘Post’,
fields: {
title: {
type: GraphQLString,
},
description: {
type: GraphQLString,
},
author: {
type: authorType,
resolve: (source, params) => {
return authors[source.author]
},
},
},
})
const queryType = new GraphQLObjectType({
name: ‘Query’,
fields: {
post: {
type: postType,
args: {
id: { type: GraphQLInt },
},
resolve: (source, { id }) => {
return posts[id]
},
},
posts: {
type: new GraphQLList(postType),
resolve: () => {
return posts
},
},
},
})
const schema = new GraphQLSchema({
query: queryType,
})
module.exports = schema
Xem mã hoàn chỉnh trên Glitch.
Các hướng dẫn về graphql khác:
- Giới thiệu về GraphQL
- Giới thiệu đầy đủ về Apollo, bộ công cụ GraphQL
- Cách tạo Máy chủ GraphQL với Node.js và Express
- Cách xác thực bằng GraphQL Cookies và JWT
- API GraphQL so với API REST