GraphQL 实战指南：从 Schema 设计到性能优化的完整教程#

1
# 定义类型
2
type User {
3
  id: ID!
4
  name: String!
5
  email: String!
6
  posts: [Post!]!
7
}
8

9
type Post {
10
  id: ID!
11
  title: String!
12
  content: String!
13
  author: User!
14
  createdAt: String!
15
}
16

17
# 定义查询
18
type Query {
19
  user(id: ID!): User
20
  users: [User!]!
21
  post(id: ID!): Post
22
  posts(authorId: ID): [Post!]!
23
}
24

25
# 定义变更
26
type Mutation {
27
  createUser(input: CreateUserInput!): User!
28
  updateUser(id: ID!, input: UpdateUserInput!): User!
29
  deleteUser(id: ID!): Boolean!
30
  createPost(input: CreatePostInput!): Post!
31
}
32

33
# 输入类型
34
input CreateUserInput {
35
  name: String!
36
  email: String!
37
}
38

39
input UpdateUserInput {
40
  name: String
41
  email: String
42
}
43

44
input CreatePostInput {
45
  title: String!
46
  content: String!
47
  authorId: ID!
48
}

1
# 基本查询
2
query {
3
  user(id: "1") {
4
    id
5
    name
6
    email
7
  }
8
}
9

10
# 嵌套查询
11
query {
12
  user(id: "1") {
13
    name
14
    posts {
15
      title
16
      createdAt
17
    }
18
  }
19
}
20

21
# 带参数的查询
22
query GetUser($id: ID!) {
23
  user(id: $id) {
24
    name
25
    email
26
  }
27
}
28

29
# 变更
30
mutation CreateUser($input: CreateUserInput!) {
31
  createUser(input: $input) {
32
    id
33
    name
34
    email
35
  }
36
}
37

38
# 片段复用
39
fragment UserFields on User {
40
  id
41
  name
42
  email
43
}
44

45
query {
46
  user(id: "1") {
47
    ...UserFields
48
    posts {
49
      title
50
    }
51
  }
52
}

1
import { ApolloServer } from '@apollo/server';
2
import { startStandaloneServer } from '@apollo/server/standalone';
3

4
// 定义 Schema
5
const typeDefs = `#graphql
6
  type Book {
7
    title: String
8
    author: String
9
  }
10

11
  type Query {
12
    books: [Book]
13
  }
14
`;
15

16
// 模拟数据
17
const books = [
18
  { title: 'The Awakening', author: 'Kate Chopin' },
19
  { title: 'City of Glass', author: 'Paul Auster' }
20
];
21

22
// 定义 Resolvers
23
const resolvers = {
24
  Query: {
25
    books: () => books,
26
  },
27
};
28

29
// 创建服务器
30
const server = new ApolloServer({
31
  typeDefs,
32
  resolvers,
33
});
34

35
const { url } = await startStandaloneServer(server, {
36
  listen: { port: 4000 },
37
});
38

39
console.log(`Server ready at: ${url}`);

1
const resolvers = {
2
  Query: {
3
    user: async (_, { id }, { dataSources }) => {
4
      return dataSources.userAPI.getUser(id);
5
    },
6
    users: async (_, __, { dataSources }) => {
7
      return dataSources.userAPI.getUsers();
8
    }
9
  },
10

11
  User: {
12
    // 为 User 类型的 posts 字段提供解析
13
    posts: async (parent, _, { dataSources }) => {
14
      return dataSources.postAPI.getPostsByAuthor(parent.id);
15
    },
16

17
    // 计算字段
18
    fullName: (parent) => `${parent.firstName} ${parent.lastName}`
19
  },
20

21
  Mutation: {
22
    createPost: async (_, { input }, { dataSources, user }) => {
23
      if (!user) throw new AuthenticationError('Not authenticated');
24

25
      return dataSources.postAPI.createPost({
26
        ...input,
27
        authorId: user.id
28
      });
29
    }
30
  }
31
};

1
import DataLoader from 'dataloader';
2

3
// 批量加载函数
4
const batchUsers = async (ids) => {
5
  const users = await db.users.findMany({
6
    where: { id: { in: ids } }
7
  });
8

9
  // 按原始顺序返回
10
  return ids.map(id => users.find(user => user.id === id));
11
};
12

13
// 创建 DataLoader
14
const userLoader = new DataLoader(batchUsers);
15

16
// 在 Resolver 中使用
17
const resolvers = {
18
  Post: {
19
    author: (post, _, { loaders }) => {
20
      return loaders.user.load(post.authorId);
21
    }
22
  }
23
};
24

25
// 上下文
26
const context = () => ({
27
  loaders: {
28
    user: new DataLoader(batchUsers)
29
  }
30
});

1
import { ApolloClient, InMemoryCache, createHttpLink } from '@apollo/client';
2
import { setContext } from '@apollo/client/link/context';
3

4
const httpLink = createHttpLink({
5
  uri: 'http://localhost:4000/graphql',
6
});
7

8
const authLink = setContext((_, { headers }) => {
9
  const token = localStorage.getItem('token');
10
  return {
11
    headers: {
12
      ...headers,
13
      authorization: token ? `Bearer ${token}` : '',
14
    }
15
  };
16
});
17

18
const client = new ApolloClient({
19
  link: authLink.concat(httpLink),
20
  cache: new InMemoryCache({
21
    typePolicies: {
22
      Query: {
23
        fields: {
24
          users: {
25
            merge(existing, incoming) {
26
              return incoming;
27
            }
28
          }
29
        }
30
      }
31
    }
32
  })
33
});

1
<script setup>
2
import { useQuery, useMutation } from '@vue/apollo-composable';
3
import gql from 'graphql-tag';
4

5
// 查询
6
const { result, loading, error } = useQuery(gql`
7
  query GetUsers {
8
    users {
9
      id
10
      name
11
      email
12
    }
13
  }
14
`);
15

16
// 变更
17
const { mutate: createUser, onDone } = useMutation(gql`
18
  mutation CreateUser($input: CreateUserInput!) {
19
    createUser(input: $input) {
20
      id
21
      name
22
    }
23
  }
24
`);
25

26
const handleCreate = async () => {
27
  await createUser({
28
    input: { name: '张三', email: 'zhangsan@example.com' }
29
  });
30
};
31
</script>

1
import { createComplexityLimitRule } from 'graphql-validation-complexity';
2

3
const complexityLimit = createComplexityLimitRule(1000);
4

5
const server = new ApolloServer({
6
  typeDefs,
7
  resolvers,
8
  validationRules: [complexityLimit]
9
});

1
// 使用 Apollo Persisted Queries
2
import { createPersistedQueryLink } from '@apollo/client/link/persisted-queries';
3
import { sha256 } from 'crypto-hash';
4

5
const link = createPersistedQueryLink({
6
  sha256,
7
  useGETForHashedQueries: true
8
});

1
const cache = new InMemoryCache({
2
  typePolicies: {
3
    Post: {
4
      fields: {
5
        comments: {
6
          merge(existing = [], incoming) {
7
            return [...existing, ...incoming];
8
          }
9
        }
10
      }
11
    }
12
  }
13
});