GraphQL 作为一种现代 API 查询语言，凭借其高效、灵活和强大的数据获取能力，广泛应用于现代 Web 应用程序。
GraphQL 快速入门示例：
1. 后端配置 (使用 GraphQL Yoga)
首先，搭建 GraphQL 服务器。安装 GraphQL Yoga 并创建一个简单的 GraphQL schema：
<code class="bash">npm init -y npm install graphql yoga graphql-yoga</code>
<code class="javascript">// 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`));</code>
2. 前端配置 (使用 Apollo Client)
接下来，在前端应用中配置 Apollo Client 与 GraphQL 服务器通信：
<code class="bash">npm install apollo-boost @apollo/client graphql</code>
<code class="javascript">// 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;</code>
3. 编写前端组件
在 React 组件中使用 Apollo Client 执行查询和变更：
<code class="javascript">// 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;</code>
我们使用 GET_HELLO 查询获取服务器的问候语，并使用 ADD_MESSAGE_MUTATION 变更在用户点击按钮时向服务器发送新消息。
4. 运行应用
启动后端服务器：
<code class="bash">node server.js</code>
然后启动前端应用 (假设使用 Create React App)：
<code class="bash">npm start</code>
GraphQL 基本查询
1. 查询语言：查询、变更、订阅
GraphQL 查询和变更使用类似 JSON 的结构表示：
<code class="graphql"># 查询示例
query GetUser {
user(id: 1) {
name
email
}
}
# 变更示例
mutation CreateUser {
createUser(name: "Alice", email: "alice@example.com") {
id
name
}
}
# 订阅示例 (假设使用 WebSocket)
subscription OnNewUser {
newUser {
id
name
}
}</code>
2. 类型系统
后端定义 GraphQL schema 描述这些类型：
<code class="graphql">type User {
id: ID!
name: String!
email: String!
}
type Mutation {
createUser(name: String!, email: String!): User
}
type Subscription {
newUser: User
}</code>
3. 查询结构：字段和参数
查询结构由字段和参数组成。
4. 层次结构和嵌套
GraphQL 查询可以嵌套。
