Apifox 中如何调试 GraphQL？图文教程
GraphQL 是一种用于 API 的查询语言，也是一个运行时(runtime)，用来执行这些查询的类型系统。GraphQL 由 Facebook 于 2012 年开发，并于 2015 年开源。与传统的 RESTful API 不同，GraphQL 允许客户端精确地指定它们需要的数据，而非服务端预定义好的几个端点（接口）来返回固定的数据结构。
然而，对于初次接触或者在项目中使用 GraphQL 的开发者来说，如何有效地调试和测试 GraphQL 请求成为一项重要的任务。本文将介绍如何在 Apifox 中新建和调试 GraphQL 请求，以便更加顺畅地进行开发工作。
步骤1：使用 Nodejs 来搭建一个 GraphQL 服务
如果你的本地没有 GraphQL 服务，那么可以参照本节来搭建一个，如果有的话，可以直接跳过这一步，进入到下一小节。本小节用 Node.js 来搭建一个 GraphQL 服务。
当使用 Node.js 搭建 GraphQL 服务时，通常会使用一些库，比如 Express 和 Apollo Server。以下是一个简单的示例，使用 Express 和 Apollo Server 搭建一个 GraphQL 服务，并提供查询博客数据的接口。
首先，确保你已经安装了必要的 npm 包：
npm install express apollo-server graphql然后，创建一个简单的 Express 应用：
// index.js
const express = require('express');
const { ApolloServer, gql } = require('apollo-server-express');
// 数据模型
const authors = [
{ id: '1', name: 'John Doe' },
{ id: '2', name: 'Jane Smith' }
];
const posts = [
{ id: '1', title: 'GraphQL Introduction', content: 'This is a brief introduction to GraphQL.', authorId: '1' },
{ id: '2', title: 'GraphQL Advanced Techniques', content: 'Learn advanced techniques in GraphQL.', authorId: '1' },
{ id: '3', title: 'Node.js Basics', content: 'Introduction to Node.js programming.', authorId: '2' }
];
const comments = [
{ id: '1', text: 'Great article!', postId: '1' },
{ id: '2', text: 'Very helpful!', postId: '2' },
{ id: '3', text: 'Thanks for sharing.', postId: '2' },
{ id: '4', text: 'I have a question.', postId: '1' },
{ id: '5', text: 'Looking forward to more content.', postId: '2' }
];
// 定义 GraphQL schema
const typeDefs = gql`
type Author {
id: ID!
name: String!
posts: [Post!]!
}
type Comment {
id: ID!
text: String!
post: Post!
}
type Post {
id: ID!
title: String!
content: String!
author: Author!
comments: [Comment!]!
}
type Query {
author(id: ID!): Author
post(id: ID!): Post
authors: [Author!]!
posts: [Post!]!
comments: [Comment!]!
}
type Mutation {
addAuthor(name: String!): Author!
addPost(title: String!, content: String!, authorId: ID!): Post!
addComment(text: String!, postId: ID!): Comment!
}
`;
// 实现查询和变更解析器
const resolvers = {
Query: {
author: (parent, { id }) => authors.find(author => author.id === id),
post: (parent, { id }) => posts.find(post => post.id === id),
authors: () => authors,
posts: () => posts,
comments: () => comments,
},
Mutation: {
addAuthor: (parent, { name }) => {
const newAuthor = { id: String(authors.length + 1), name };
authors.push(newAuthor);
return newAuthor;
},
addPost: (parent, { title, content, authorId }) => {
const newPost = { id: String(posts.length + 1), title, content, authorId };
posts.push(newPost);
return newPost;
},
addComment: (parent, { text, postId }) => {
const newComment = { id: String(comments.length + 1), text, postId };
comments.push(newComment);
return newComment;
}
},
Author: {
posts: (parent) => posts.filter(post => post.authorId === parent.id),
},
Post: {
author: (parent) => authors.find(author => author.id === parent.authorId),
comments: (parent) => comments.filter(comment => comment.postId === parent.id),
},
Comment: {
post: (parent) => posts.find(post => post.id === parent.postId),
}
};
const server = new ApolloServer({ typeDefs, resolvers });
const app = express();
async function startServer() {
await server.start();
server.applyMiddleware({ app });
const PORT = 3000;
app.listen(PORT, () => {
console.log(`Server running at http://localhost:${PORT}${server.graphqlPath}`);
});
}
startServer();
最后在终端运行该文件，以启动服务：
node index.js
服务启动完毕，我们就可以使用 Apifox 来进行 GraphQL 查询了。
步骤2：Apifox 新建 GraphQL 请求
打开 Apifox，新建一个 HTTP 项目，在项目中新建一个 POST 请求，然后填写请求 URL，这个请求的 URL 就是你的 GraphQL 服务器地址，例如http://localhost:3000/graphql，接着填写接口名称，在请求参数中依次选择【Body->GraphQL】后，保存即可。
步骤3：Apifox 调试 GraphQL
接上一步，保存之后，我们来到“运行”页面，在该页面中，就可以输入你的 GraphQL 查询，并对 GraphQL 服务进行调试，例如：
query {
author(id: "1") {
id
name
}
}
在调试时也可以使用变量的形式：
Query：
query GetAuthor($authorId: ID!) {
author(id: $authorId) {
id
name
}
}
Variables：
{
"authorId": "2"
}
常见问题
Q:出现类似 SyntaxError: Unexpected token } in JSON at position 214 这样的报错如何解决？
A:这个错误通常表明服务器返回的内容不是有效的 JSON，而是包含了 JavaScript 代码或其他不属于 JSON 格式的内容。在这种的情况下，可能是因为在执行 GraphQL 查询时出现了错误，导致返回的内容不符合 JSON 格式。你可以在 【Headers】里手动设置请求头Accept-Encoding: gzip来解决，或者检查你的服务器代码和 GraphQL 查询命令是否有误。
总结
在使用 Apifox 调试 GraphQL 时，首先通过创建 HTTP 项目和 POST 请求，设置请求 URL 和接口名称，并配置请求参数。在调试阶段，可直接输入 GraphQL 查询或使用变量形式，实现更灵活和可重用的调试过程。这些步骤能够有效简化 GraphQL 服务的调试流程，提高开发效率。
知识扩展：
