使用React-Apollo在GraphQL中进行数据检索

2020年12月30日11:09:43 发表评论 38 次浏览

本文概述

在本文中, 我们将探索如何将GraphQL查询语言与Apollo Client结合使用, 以高效且无缝地进行操作从服务器获取数据。在阅读结束时, 你将学习如何使用和安装GraphQL和Apollo客户端, 以及两种不同的方法来执行询问和突变内的操作反应阿波罗.

GraphQL

GraphQL是一种查询语言, 它使用已定义的系统来描述用户应如何从API请求数据。 GraphQL要求用户指定需要传输的确切数据(通常是从服务器传输), 然后将其加载到客户端。

在了解如何使用Apollo执行特定查询操作之前, 我们将回顾GraphQL查询库中可以执行的一些基本操作和操作。

1.查询

一种GraphQL查询操作与从服务器端获取基本数据有关。

{
    query getItems {
      Items {
        id
        chair
        stool
       }
     }
  }

上面是一个带有名称的GraphQL查询getItems, 获取id, 椅子和粪便.

2.变异

添加突变关键字执行基本CRUD(创建, 读取, 更新和删除)操作在GraphQL应用程序中。

{
    mutation addUser(name: String!, email: String!){
      addUser(name: $name, email: $email){
        id
        name
        email
        created_at
      }
    }
  }

以上添加用户突变会返回用户的名称, id, 电子邮件和create_at指定用户名和电子邮件的字段。

3.订阅

这是一个基于事件的操作, 涉及在执行特定事件时从服务器到客户端的数据传输。要在GraphQL中创建订阅, 我们需要将订阅类型添加到架构中:

const typeDefs = gql`
  type Subscription {
    bookAdded: Book
  }`

下一步是创建一个解析器.Pubsub在这种情况下, 会从突变内通知事件。

const BOOK_ADDED = 'BOOK_ADDED';

const resolvers = {
  Subscription: {
    bookAdded: {
      subscribe: () => pubsub.asyncIterator([BOOK_ADDED]), }, }, Mutation: {
    addBook(root, args, context) {
      pubsub.publish(BOOK_ADDED, { bookAdded: args });
      return postController.addBook(args);
    }, }, };

订阅是由发布呼叫内部变异。

我们为制作了一个自定义演示.
不完全是。点击这里查看.

使用React-Apollo在GraphQL中进行数据检索1

阿波罗

阿波罗用作GraphQL应用程序中本地和远程数据存储的状态管理库。你可以在Apollo的帮助下执行一些基本操作, 包括:获取, 本地状态存储和缓存。阿波罗客户也有一个内置集成使用React使开发变得更加容易。

Apollo客户端的一些基本功能包括:

声明式数据获取

Apollo客户端允许用户从应用程序编程界面中指定所需的确切数据。 React使用useQuery挂钩使我们能够在GraphQL应用程序中执行数据检索和数据提取操作。官方文档中的示例可以在下面找到:

function Feed() {
    const { loading, error, data } = useQuery(GET_DOGS);
    if (error) return <Error />;
    if (loading || !data) return <Fetching />;

    return <DogList dogs={data.dogs} />;
  }

借助useQuery挂钩, 我们能够从GraphQL服务器获取数据, 这将导致UI更新以反映所有更改。

快取

除了可以使用GraphQL执行的主要提取操作外, 还可以在几乎没有配置的情况下执行智能数据缓存操作。

以下是用于数据缓存的Apollo客户端配置:

import { ApolloClient, InMemoryCache } from '@apollo/client';

const client = new ApolloClient({
  cache: new InMemoryCache()
});

Apollo客户端附带的其他好处包括:

  1. 支持现代反应钩
  2. 兼容性
  3. 强大的社区支持
  4. 分页

GraphQL和Apollo客户端的安装和使用

如果你尚未设置React应用程序, 请先运行以下命令:

npx create-react-app

要在你的React应用程序中使用GraphQL和Apollo, 你将需要安装以下依赖项:

npm install apollo-boost graphql react-apollo

你的带有GraphQL的React应用程序现已设置并可以使用!

要创建连接, 请先创建一个index.js文件并添加以下代码段:

import ApolloClient from "apollo-boost";
import { ApolloProvider } from 'react-apollo';

const client = new ApolloClient({
    uri: //graghql server url should be here
  });

接下来, 使用ApolloProvider包装你的应用程序组件, 将客户端作为道具传递:

ReactDOM.render(
    <ApolloProvider client={client}>
      <App />
    </ApolloProvider>, document.getElementById("root")
  );

在一开始, 我们讨论了可以使用GraphQL执行的基本操作, 包括询问和突变。现在, 让我们看看如何使用Apollo来执行其中一些操作useQuery挂钩方法和渲染道具方法。

查询

GraphQL查询涉及读取和获取数据。我们可以采用两种方法在React Apollo中执行此操作:useQuery挂钩方法和渲染道具方法。

useQuery勾方法

首先, 让我们创建一个GraphQL查询并将其命名getItems如下所示:

import React from "react";
import { useQuery } from "react-apollo";
import { gql } from "apollo-boost";

const GET_ITEMS = gql`
  query GetItems {
    items {
      id
          oneitem
    }
  }
`;

接下来, 创建一个功能组件, 并将GraphQL查询传递给useQuery挂钩如下:

function DisplayItems() {
  const { loading, error, data } = useQuery(GET_ITEMS);

  if (loading) return 'Loading...';
  if (error) return `Error! ${error.message}`;

  return (
    <select name="items">
      {data.items.map(item => (
        <option key={item.id} value={item.oneitem}>
          {item.oneitem}
        </option>
      ))}
    </select>
  );
}

当获取新数据或发生错误以反映新更改时, 应用程序将更新。

渲染道具的方法

对于render props方法, 第一步保持不变, 除了从反应阿波罗我们之前安装的:

import React from "react";
import { Query } from "react-apollo";
import { gql } from "apollo-boost";

const GET_ITEMS = gql`
  query GetItems {
    items {
      id
          oneitem
    }
  }
`;

接下来, 我们将利用询问通过将创建的GraphQL查询传递给它并按如下方式使用它:

function DisplayItems() {

  if (loading) return 'Loading...';
  if (error) return `Error! ${error.message}`;

  return (
    <Query query={GET_ITEMS}>
    <select name="items">
      {data.items.map(item => (
        <option key={item.id} value={item.oneitem}>
          {item.oneitem}
        </option>
      ))}
    </select>
    </Query>
  );
}

就像在钩子方法中一样, 应用程序将更新以反映新数据或返回错误。

突变

变异涉及执行创建, 更新和删除操作。与查询一样, 在处理变异时, 我们可以使用钩子方法和渲染道具方法。

挂钩方法

首先让我们导入依赖项, 包括useMutation从进口反应阿波罗.

import React, { useState } from 'react';
import { useMutation } from 'react-apollo';
import { gql } from 'apollo-boost';

const ADD_TODO = gql`
  mutation AddTodo($type: String!) {
    addTodo(type: $type) {
      id
      type
    }
  }
`;

接下来是创建一个名为待办事项并通过我们ADD_TODO突变为useMutation钩:

function AddTodo() {
  let input;
  const [addTodo, { data }] = useMutation(ADD_TODO);

  return (
    <div>
      <form
        onSubmit={e => {
          e.preventDefault();
          addTodo({ variables: { type: input.value } });
          input.value = '';
        }}
      >
        <input
          ref={node => {
            input = node;
          }}
        />
        <button type="submit">Add Todo</button>
      </form>
    </div>
  );
}

渲染道具的方法

与钩子方法类似, 我们需要使用新的导入必要的依赖项突变从进口反应阿波罗:

import React, { useState } from 'react';
import { useMutation } from 'react-apollo';
import { gql } from 'apollo-boost';

const ADD_TODO = gql`
  mutation AddTodo($type: String!) {
    addTodo(type: $type) {
      id
      type
    }
  }
`;

要完成此操作, 请按如下所示传递创建的突变:

function AddTodo() {
  let input;

  return (
    <Mutation mutation={ADD_TODO}>
    <div>
      <form
        onSubmit={e => {
          e.preventDefault();
          addTodo({ variables: { type: input.value } });
          input.value = '';
        }}
      >
        <input
          ref={node => {
            input = node;
          }}
        />
        <button type="submit">Add Todo</button>
      </form>
    </div>
    </Mutation>
  );
}

总结

GraphQL在处理数据获取时是一个不错的选择, 因为它解决了RESTful API附带的过度获取和获取不足问题。 Apollo Client使GraphQL与服务器的连接变得简单, 无缝和高效。

全面了解生产React应用

调试React应用程序可能很困难, 尤其是当用户遇到难以重现的问题时。如果你有兴趣监视和跟踪Redux状态, 自动显示JavaScript错误以及跟踪缓慢的网络请求和组件加载时间,

尝试notlogy

.

使用React-Apollo在GraphQL中进行数据检索2
LogRocket仪表板免费试用横幅

日志火箭就像Web应用程序的DVR, 实际上记录了React应用程序中发生的一切。你可以汇总并报告问题发生时应用程序所处的状态, 而不用猜测为什么会发生问题。 notlogy还监视你的应用程序的性能, 并使用客户端CPU负载, 客户端内存使用情况等指标进行报告。

notlogy Redux中间件软件包在你的用户会话中增加了一层可见性。 notlogy记录Redux存储中的所有操作和状态。

现代化如何调试React应用程序-免费开始监控.

一盏木

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: