graphql 作为一种现代 API 查询语言，凭借其高效、灵活和强大的数据获取能力，广泛应用于现代 Web 应用程序。
GraphQL 快速入门示例：
1. 后端配置 (使用 GraphQL Yoga)
首先，搭建 GraphQL 服务器。安装 GraphQL Yoga 并创建一个简单的 GraphQL schema：
npm init -y npm install graphql yoga graphql-yoga
// server.js const { GraphQLServer } = require('graphql-yoga'); const typedefs = ` type Query { hello: String } type Mutation { addMessage(message: String!): String } `; const resolvers = { Query: { hello: () => 'Hello world!', }, Mutation: { addMessage: (_, { message }) => `You added the message "${message}"`, }, }; const server = new GraphQLServer({ typeDefs, resolvers }); server.start(() => console.log(`服务器运行在 http://localhost:4000`));
2. 前端配置 (使用 Apollo Client)
接下来，在前端应用中配置 Apollo Client 与 GraphQL 服务器通信：
npm install apollo-boost @apollo/client graphql
// client.js import ApolloClient from 'apollo-boost'; import { InMemoryCache } from '@apollo/client'; const client = new ApolloClient({ uri: 'http://localhost:4000/graphql', cache: new InMemoryCache(), }); export default client;
3. 编写前端组件
在 React 组件中使用 Apollo Client 执行查询和变更：
// App.js import React from 'react'; import { gql, useQuery, useMutation } from '@apollo/client'; import client from './client'; const GET_HELLO = gql` query GetHello { hello } `; const ADD_MESSAGE_MUTATION = gql` mutation AddMessage($message: String!) { addMessage(message: $message) } `; function App() { const { loading, error, data } = useQuery(GET_HELLO); const [addMessage, { data: mutationData }] = useMutation(ADD_MESSAGE_MUTATION); if (loading) return <p>加载中...</p>; if (error) return <p>错误 :(</p>; return ( <div> <h1>{data.hello}</h1> <button onClick={() => addMessage({ variables: { message: 'Hello from frontend!' } })}> 添加消息 </button> {mutationData && <p>新消息: {mutationData.addMessage}</p>} </div> ); } export default App;
我们使用 GET_HELLO 查询获取服务器的问候语，并使用 ADD_MESSAGE_MUTATION 变更在用户点击按钮时向服务器发送新消息。
4. 运行应用
启动后端服务器：
node server.js
然后启动前端应用 (假设使用 Create React App)：
npm start
GraphQL 基本查询
1. 查询语言：查询、变更、订阅
GraphQL 查询和变更使用类似 json 的结构表示：
# 查询示例 query GetUser { user(id: 1) { name email } } # 变更示例 mutation CreateUser { createUser(name: "Alice", email: "alice@example.com") { id name } } # 订阅示例 (假设使用 WebSocket) subscription OnNewUser { newUser { id name } }
2. 类型系统
后端定义 GraphQL schema 描述这些类型：
type User { id: ID! name: String! email: String! } type Mutation { createUser(name: String!, email: String!): User } type Subscription { newUser: User }
3. 查询结构：字段和参数
查询结构由字段和参数组成。
4. 层次结构和嵌套
GraphQL 查询可以嵌套。
