使用Apollo＆React探索GraphQl：构建超级英雄数据库

深入graphql世界，发现为什么它会产生如此多的兴奋！本教程提供了对GraphQL的明确解释，并提供了动手体验。

首先，让我们解决一个核心问题：什么是

graphql？ 这不是一些晦涩的计算器函数；相反，这是一种强大的查询语言（或更确切地说是查询规范），用于从不同来源获取数据。 它的主要优势？ 它在单个网络请求中仅检索> ，消除了传统REST API的效率低下。 本教程将Apollo服务器用作端点，并与Apollo客户端一起使用React应用程序来访问数据。 我们将从服务器开始。

密钥概念：

graphQl是一种查询语言，可在任何数据源的单个请求中提供精确的数据检索，超过效率和灵活性的REST API。

> Apollo服务器（端点）和使用Apollo客户端的React应用程序对于GraphQl数据利用率至关重要。
• >使用超级英雄数据库示例。
>它展示了前端和后端开发如何在很大程度上独立进行，而模式则充当界面。
设置Apollo服务器：
• >

创建一个目录。>

>导航到它并安装必要的软件包：

1. apollo-server
2. 创建
和add：

npm install apollo-server apollo-server-express graphql

3. 这将导入Apollo服务器和GraphQl查询解析的基本组件。 index.js
创建GraphQl架构：

const { ApolloServer, gql } = require('apollo-server');

>

接下来，在

>中定义架构：

> 这定义了

和

>类型和两个查询：index.js（返回所有用户）和

>（返回用户ID）。

const typeDefs = gql`
  type User {
    id: ID!
    name: String
    superpowers: [Superpower]!
  }

  type Superpower {
    id: ID!
    text: String
  }

  type Query {
    users: [User]
    user(id: ID!): User
  }
`;

添加示例数据：User Superpower>将模拟数据添加到users：user

>这提供了用于查询的示例数据。 请记住，GraphQl不仅限于JavaScript数组；它可以连接到任何数据源。

定义解析器：

index.js>解析器解释查询。将它们添加到

>：

const users = [
  { id: '1', name: 'Peter Parker', superpowers: [{ id: '1', text: 'Web slinging' }, { id: '2', text: 'Spidey sense' }] },
  { id: '2', name: 'Tony Stark', superpowers: [{ id: '3', text: 'Industrial design' }, { id: '4', text: 'Robotic fashion' }] }
];

>

解析器返回所有用户，而> 通过ID找到用户。

index.js启动服务器：

const resolvers = {
  Query: {
    users: () => users,
    user: (root, { id }) => users.find(user => user.id === id),
  },
};

通过实例化和启动服务器：

usersrunuser>并访问

>的GraphQl Playground

交互式查询：

在操场上尝试这些查询：index.js

• >提取彼得·帕克的名字：

npm install apollo-server apollo-server-express graphql

• >提取彼得·帕克的姓名和超级大国：

const { ApolloServer, gql } = require('apollo-server');

• 获取所有用户及其超级大国：

const typeDefs = gql`
  type User {
    id: ID!
    name: String
    superpowers: [Superpower]!
  }

  type Superpower {
    id: ID!
    text: String
  }

  type Query {
    users: [User]
    user(id: ID!): User
  }
`;

与React集成：

：

创建一个React App：

const users = [
  { id: '1', name: 'Peter Parker', superpowers: [{ id: '1', text: 'Web slinging' }, { id: '2', text: 'Spidey sense' }] },
  { id: '2', name: 'Tony Stark', superpowers: [{ id: '3', text: 'Industrial design' }, { id: '4', text: 'Robotic fashion' }] }
];

修改
2. ：src/index.js

const resolvers = {
  Query: {
    users: () => users,
    user: (root, { id }) => users.find(user => user.id === id),
  },
};

替换
3. ：src/App.js

const server = new ApolloServer({ typeDefs, resolvers });
server.listen().then(({ url }) => console.log(`Apollo server started at ${url}`));

run

在npm start>目录中以查看my-graphql>的结果 http://localhost:3000/本教程为使用GraphQl提供了基础。 探索突变（用于数据修改）和其他高级功能，以进一步提高您的技能。 快乐的编码！

GraphQl FAQS：

• >什么是graphql？

  apis的查询语言，以及针对您的数据执行这些查询的运行时间。 这是一种更有效，更灵活的替代方案。>

• graphql vs. ret：

  REST使用多个端点，而GraphQl允许客户端仅在单个查询中请求所需的数据，从而防止过度提取和取得不足。

>键GraphQl特征：
• 分层查询结构，强键入，具有订阅的实时数据和内省（查询模式本身）。
  graphQl架构：
定义数据类型和关系，充当客户端和服务器之间的合同。
• >
  查询结构：层次结构，反映响应数据结构。 客户请求特定字段并嵌套以进行复杂的数据检索。

• 分辨率：

  函数定义了如何获取或突变数据的特定模式字段的数据。 他们将查询连接到数据源。
>

以上是使用Apollo＆React探索GraphQl：构建超级英雄数据库的详细内容。更多信息请关注PHP中文网其他相关文章！