当前位置：首页 > 文章列表 > 文章 > 前端 > GraphQL是什么？如何用它查询API数据？

GraphQL是什么？如何用它查询API数据？

2026-02-07 14:28:35 0浏览收藏

知识点掌握了，还需要不断练习才能熟练运用。下面golang学习网给大家带来一个文章开发实战，手把手教大家学习《JavaScript中的GraphQL是什么？如何查询API数据？》，在实现功能的过程中也带大家重新温习相关知识点，温故而知新，回头看看说不定又有不一样的感悟！

GraphQL是一种API查询语言和运行时，非JavaScript原生特性；它通过声明式查询精确获取数据，解决REST的过度/不足获取问题，支持变量、片段、类型安全及客户端缓存。

javascript的GraphQL是什么_如何查询API数据？

GraphQL 不是 JavaScript 的一部分，而是一种用于 API 的查询语言和运行时，JavaScript 是最常用的实现语言之一。它让你能精确获取所需数据，避免传统 REST API 中常见的过度获取或获取不足问题。

GraphQL 查询的基本结构

一个 GraphQL 查询是一个字符串，描述你想要的数据结构。服务器按这个结构返回 JSON 数据，字段名和嵌套层级与查询完全一致。

用 query 关键字定义查询操作（也可省略，当它是唯一操作时）
用大括号 {} 包裹要请求的字段，支持嵌套对象和字段别名
可以传入变量（如 ID、分页参数），通过 $variableName 引用
支持 fragments 复用字段集，适合多处需要相同子字段的场景

在 JavaScript 中发起 GraphQL 请求

最常见方式是用 fetch 发送 POST 请求到 GraphQL 服务端点（通常是 /graphql），请求体包含 query 字符串和可选变量。

例如：

const query = `
  query GetUser($id: ID!) {
    user(id: $id) {
      name
      email
      posts(first: 2) {
        title
        publishedAt
      }
    }
  }
`;

fetch('/graphql', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({
    query,
    variables: { id: '123' }
  })
})
.then(res => res.json())
.then(data => console.log(data.data.user));

使用客户端库简化操作

手动写 fetch 容易出错且难维护。主流方案是用封装好的客户端，比如：

Apollo Client：功能完整，支持缓存、本地状态、自动更新 UI
URQL：轻量、可扩展，适合中小型项目
GraphQL Codegen + TypeScript：自动生成类型安全的 hooks 和接口，减少手写错误

以 Apollo 为例，定义查询后，用 useQuery Hook 即可自动处理加载、错误、数据响应：

import { gql, useQuery } from '@apollo/client';

const GET_USER = gql`
  query GetUser($id: ID!) {
    user(id: $id) {
      name
      avatarUrl
    }
  }
`;

function UserProfile({ userId }) {
  const { loading, error, data } = useQuery(GET_USER, {
    variables: { id: userId }
  });

  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error: {error.message}</p>;

  return <p>{data.user.name}</p>;
}