Apifox 中如何调试 GraphQL?图文教程

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

服务启动完毕,我们就可以使用 Apifox 来进行 GraphQL 查询了。

步骤2:Apifox 新建 GraphQL 请求


打开 Apifox,新建一个 HTTP 项目,在项目中新建一个 POST 请求,然后填写请求 URL,这个请求的 URL 就是你的 GraphQL 服务器地址,例如http://localhost:3000/graphql,接着填写接口名称,在请求参数中依次选择【Body->GraphQL】后,保存即可。

Apifox 中调试 GraphQL

步骤3:Apifox 调试 GraphQL

接上一步,保存之后,我们来到“运行”页面,在该页面中,就可以输入你的 GraphQL 查询,并对 GraphQL 服务进行调试,例如:

query {
  author(id: "1") {
    id
    name
  }
}
Apifox 中调试 GraphQL


在调试时也可以使用变量的形式:

Query:

query GetAuthor($authorId: ID!) {
  author(id: $authorId) {
    id
    name
  }
}


Variables:

{
  "authorId": "2"
}
Apifox 中调试 GraphQL

常见问题


Q:出现类似 SyntaxError: Unexpected token } in JSON at position 214 这样的报错如何解决?


A:这个错误通常表明服务器返回的内容不是有效的 JSON,而是包含了 JavaScript 代码或其他不属于 JSON 格式的内容。在这种的情况下,可能是因为在执行 GraphQL 查询时出现了错误,导致返回的内容不符合 JSON 格式。你可以在 【Headers】里手动设置请求头Accept-Encoding: gzip来解决,或者检查你的服务器代码和 GraphQL  查询命令是否有误。

Apifox 中调试 GraphQL

总结

在使用 Apifox 调试 GraphQL 时,首先通过创建 HTTP 项目和 POST 请求,设置请求 URL 和接口名称,并配置请求参数。在调试阶段,可直接输入 GraphQL 查询或使用变量形式,实现更灵活和可重用的调试过程。这些步骤能够有效简化 GraphQL 服务的调试流程,提高开发效率。

知识扩展:

订阅
qrcode

订阅

随时随地获取 Apifox 最新动态