app.ts
import express, { Request, Response } from "express";
import { createHandler } from "graphql-http/lib/use/express";
import { buildSchema } from "graphql";
import { ruruHTML } from "ruru/server";
import cors from "cors";
import fs from "fs";
import path from "path";
// Int,Float,String,Boolean,ID
var schema = buildSchema(`
#复杂对象类型
type Article {
id: ID
title: String
content: String
}
#复杂对象类型
type User {
id: ID
name: String
age: Int
salary: Float
articles: [Article] #数组
}
#查询列表,可查询数据名称类型
#默认每个数据可以为空
#加!不可以为空
type Query {
hello: String!
foo: String!
count: Int!
salary: Float!
isGood: Boolean
userId: ID
user: User
tag: [String!]!
#条件查询
article(id: ID!, title: String): [Article]!
}
#参数类型
input CreateArticleParams {
title: String!
content: String!
}
input UpdateArticleParams {
id: ID
title: String!
content: String!
}
# 复杂数据类型
type DeletionStatus {
success: Boolean!
}
#修改入口点
type Mutation {
#createArticle(title: String!, content: String!): Article
createArticle(params: CreateArticleParams): Article
updateArticle(params: UpdateArticleParams): Boolean
deleteArticle(id: ID!): DeletionStatus
}
`);
// resolver,对应schema中Query,Mutation进行处理
var root = {
hello() {
return "Hello world!"
},
foo() {
return "foo";
},
count() {
return 10;
},
salary() {
return 14000.5;
},
isGood() {
return true;
},
userId() {
return '123456';
},
tag() {
return ['ABC', 'DEF', 'GHI', 'JKL'];
},
user() {
return {
id: 'asdqwasdasd',
name: 'String',
age: 24,
salary: 16000,
articles: [
{ id: "12sdadasd", title: "abcdefg", content: "aaaaaaaaa" },
{ id: "asdsdqwe2", title: "abcdefg", content: "aaaaaaaaa" },
{ id: "qwee2qwe2", title: "abcdefg", content: "aaaaaaaaa" },
]
}
},
// 条件查询
article(args: { id: string }) {
// console.log(args);
return [
{ id: "12sdadasd", title: "abcdefg", content: "aaaaaaaaa" },
{ id: "asdsdqwe2", title: "abcdefg", content: "aaaaaaaaa" },
{ id: "qwee2qwe2", title: "abcdefg", content: "aaaaaaaaa" },
].filter(item => item.id === args.id);
},
// 添加，修改，删除
createArticle({ params: { title, content } }: { params: { title: string, content: string } }) {
console.log(title, content);
return { id: "mokasdno", title, content };
},
updateArticle({ params }: { params: { [key: string]: string } }) {
console.log(params);
return true;
},
deleteArticle({ id }: { id: string }) {
console.log(id);
return { success: true };
}
}
var app = express();
app.use(cors());
app.use(express.static(path.join(__dirname, 'public')));
app.all(
"/graphql",
createHandler({
schema: schema,
rootValue: root
})
);
// Serve the GraphiQL IDE.
app.get("/", (_req: Request, res: Response) => {
res.type("html")
res.end(ruruHTML({ endpoint: "/graphql" }))
});
app.get('/index', (_req: Request, res: Response) => {
res.type("html");
res.end(fs.readFileSync(path.resolve(__dirname, './index.html'), 'utf-8'));
});
// Start the server at port
app.listen(4000, () => {
console.log("Running a GraphQL API server at http://localhost:4000/graphql");
});index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" href="react.svg" type="image/x-icon">
<script src="https://cdn.staticfile.net/axios/1.6.5/axios.min.js"></script>
<script src="https://cdn.staticfile.net/axios/1.6.5/axios.min.js.map"></script>
<title>Document</title>
</head>
<body>
</body>
<script>
// 普通查询
axios({
method: "POST",
url: "http://localhost:4000/graphql",
data: {
// query: '{ foo, hello, count, salary, isGood, userId, tag, user{ name, age, articles { title, content } } }'
query: 'query SearchData { foo, hello, count, salary, isGood, userId, tag, user{ name, age, articles { title, content } } }'
}
}).then(res => {
if (res.data?.data) {
console.log(res.data.data);
} else {
console.log(JSON.stringify(res.data.errors));
}
}).catch(err => {
console.log(err);
});
// 条件查询
axios({
method: "POST",
url: "http://localhost:4000/graphql",
data: {
// query: '{ article(id: "qwee2qwe2", title: "abcdefg") { id, title, content } }'
// query: 'query asdadxc { article(id: "qwee2qwe2", title: "abcdefg") { id, title, content } }',
query: 'query asdadxc($id: ID!, $title: String) { article(id: $id, title: $title) { id, title, content } }',
// 使用variables进行字符串替换,免字符串拼接
variables: {
id: "qwee2qwe2",
title: "abcdefg"
}
}
}).then(res => {
if (res.data?.data) {
console.log(res.data.data);
} else {
console.log(JSON.stringify(res.data.errors));
}
}).catch(err => {
console.log(err);
});
// 添加
axios({
method: "POST",
url: "http://localhost:4000/graphql",
data: {
// query: 'mutation { createArticle(title: "abcdef", content: "texttttttt"){id,title,content} }'
// query: 'mutation { createArticle(params: { title: "abcdef", content: "texttttttt" }){id,title,content} }'
// query: 'mutation adasds { createArticle(params: { title: "abcdef", content: "texttttttt" }){id,title,content} }'
query: `mutation asdasdsdd($create: CreateArticleParams) {
createArticle(params: $create){
id, title, content
}
}`,
variables: {
create: {
title: "abcdefg",
content: "texttttttt"
}
}
}
}).then(res => {
if (res.data?.data) {
console.log(res.data.data);
} else {
console.log(JSON.stringify(res.data.errors));
}
}).catch(err => {
console.log(err);
});
// 修改
axios({
method: "POST",
url: "http://localhost:4000/graphql",
data: {
// query: 'mutation { createArticle(title: "abcdef", content: "texttttttt"){id,title,content} }'
// query: 'mutation { createArticle(params: { title: "abcdef", content: "texttttttt" }){id,title,content} }'
// query: 'mutation adasds { updateArticle(params: { id:"asdasdsad",title: "abcdef", content: "texttttttt" }) }'
query: 'mutation lalalalala($update: UpdateArticleParams) { updateArticle(params: $update) }',
variables: {
update: {
id: "asdasdsad",
title: "abcdefg",
content: "texttttttt"
}
}
}
}).then(res => {
if (res.data?.data) {
console.log(res.data.data);
} else {
console.log(JSON.stringify(res.data.errors));
}
}).catch(err => {
console.log(err);
});
// 删除
axios({
method: "POST",
url: "http://localhost:4000/graphql",
data: {
// query: 'mutation { createArticle(title: "abcdef", content: "texttttttt"){id,title,content} }'
// query: 'mutation { createArticle(params: { title: "abcdef", content: "texttttttt" }){id,title,content} }'
// query: 'mutation adasds { deleteArticle(id: "asdasdsad"){ success } }'
query: 'mutation adasds($id: ID!) { deleteArticle(id: $id){ success } }',
variables: {
id: "asdasdsad",
}
}
}).then(res => {
if (res.data?.data) {
console.log(res.data.data);
} else {
console.log(JSON.stringify(res.data.errors));
}
}).catch(err => {
console.log(err);
});
// 同时执行多个修改
axios({
method: "POST",
url: "http://localhost:4000/graphql",
data: {
query: `
mutation adasds($id: ID!, $update: UpdateArticleParams, $create: CreateArticleParams) {
deleteArticle(id: $id){
success
}
createArticle(params: $create){
id, title, content
}
updateArticle(params: $update)
}
`,
variables: {
id: "asdasdsad",
update: {
id: "asdasdsad",
title: "abcdefg",
content: "texttttttt"
},
create: {
title: "abcdefg",
content: "texttttttt"
}
}
}
}).then(res => {
if (res.data?.data) {
console.log(res.data.data);
} else {
console.log(JSON.stringify(res.data.errors));
}
}).catch(err => {
console.log(err);
});
</script>
</html>