• 赚钱入口【需求资源】限时招募流量主、渠道主,站长合作;【合作模式】CPS长期分成,一次推广永久有收益。主动打款,不扣量;

React + GraphQL 2020速成课程

JavaScript rin, seun 7个月前 (07-02) 86次浏览 0个评论

React + GraphQL 2020速成课程

React + GraphQL

您是否听说过将React与GraphQL一起使用的很多知识,但又不知道如何结合使用它们来构建出色的应用程序?在本速成班中,您将学习如何通过构建完整的社交博客应用程序来做到这一点。

在一个下午之内,您将获得构建自己的React和GraphQL项目的核心技能。

React是使用JavaScript构建令人惊叹的应用程序体验的入门库。另一方面,GraphQL是一种工具,它为我们提供了一种更好,更直接的方式来获取和更改数据。

这些数据可能来自标准数据库(将在我们的应用程序中使用),也可能来自Gatsby之类的React框架,甚至来自诸如markdown文件之类的静态文件。无论如何存储,GraphQL都能更好地处理我们应用程序中的数据。

我们将了解如何通过从头到尾创建一个社交博客应用程序来利用React和GraphQL的功能,您可以在其中创建,阅读,编辑和删除帖子。React + GraphQL 2020速成课程

我们将使用什么工具🛠️

速成课程适用于对React有点熟悉(包括核心React Hooks,例如useStateuseEffect),但还不熟悉GraphQL的开发人员。

假定具有基本的React知识,但不需要GraphQL知识。我们将介绍您一路需要的所有核心GraphQL概念。

在整个课程中,我们将利用以下技术来创建我们的应用程序:

  • React(构建我​​们的用户界面)
  • GraphQL(以声明的方式获取和更改数据)
  • Apollo客户端(允许我们一起使用React和GraphQL)
  • Hasura(用于创建和管理我们的GraphQL API +数据库)

最重要的是,我们将使用在线IDE CodeSandbox。这将使我们能够在浏览器中实时对整个应用程序进行编码,而无需自己创建任何文件,文件夹或安装依赖项。

从头开始创建GraphQL API

要开始使用GraphQL,我们将看到如何从头开始制作将与我们的数据库进行通信的整个GraphQL API。

幸运的是,使用(免费)服务Hasura,此过程非常简单明了。在几秒钟内,我们将看到如何创建完整的GraphQL API并将其部署到Web,并将其连接到Postgres数据库,该数据库将负责存储我们的应用程序数据。

React + GraphQL 2020速成课程

熟悉GraphQL

在第二讲中,我们将介绍如何使用我们的API内置控制台GraphiQL以GraphQL语言编写

首先,我们将在数据库中为所有职位数据创建一个表。之后,Hasura将自动创建所需的queries 和 mutations,这是GraphQL操作的名称,可让我们获取和更改数据库中的数据。

在本课程中,我们将非常熟悉GraphiQL中的执行queries 和 mutations,这将使我们能够获取整套帖子和单个帖子,以及创建,更新和删除单个帖子数据。

React + GraphQL 2020速成课程

熟悉GraphQL

在第二讲中,我们将介绍如何使用我们的API内置控制台GraphiQL以GraphQL语言编写

首先,我们将在数据库中为所有职位数据创建一个表。之后,Hasura将自动创建所需的queries 和 mutations,这是GraphQL操作的名称,可让我们获取和更改数据库中的数据。

在本课程中,我们将非常熟悉GraphiQL中的执行queries 和 mutations,这将使我们能够获取整套帖子和单个帖子,以及创建,更新和删除单个帖子数据。React + GraphQL 2020速成课程

使用Apollo Client将React与我们的GraphQL API连接

现在我们已经习惯了使用GraphQL并了解了它的核心功能,我们将看到如何将其与React客户端连接。

将React应用程序与创建的GraphQL API连接起来的方式是通过一个名为Apollo的库。我们将通过提供指向我们的API的GraphQL端点,来了解如何设置Apollo客户端,如下所示:

import ApolloClient from "apollo-boost";

const client = new ApolloClient({
  uri: "https://react-graphql.herokuapp.com/v1/graphql"
});

使用我们新创建的客户端,我们可以通过React执行任何GraphQL操作。为此,我们需要将客户传递给我们所有的React组件。我们将在Apollo提供程序的帮助下完成此操作,如下所示:React + GraphQL 2020速成课程

使用useQuery获取帖子

设置完客户端之后,我们将使用包随附的一些特殊React钩子,了解如何使用它们执行不同的GraphQL操作@apollo/react-hooks

允许我们使用GraphQL查询数据的钩子称为useQuery。有了它,我们首先将了解如何在我们的主页中获取和显示所有帖子数据。

此外,我们还将借助名为gql的函数,学习如何直接在JavaScript文件中编写GraphQL 查询语句

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

export const GET_POSTS = gql`
  query getPosts {
    posts {
      id
      title
      body
      createdAt
    }
  }
`;

function App() {
  const { data, loading } = useQuery(GET_POSTS);

  if (loading) return <div>Loading...</div>;
  if (data.posts.length === 0) return <Empty />;

  return (
    <>
      <header className={classes.header}>
        <h2 className={classes.h2}>All Posts</h2>
        <Link to="/new" className={classes.newPost}>
          New Post
        </Link>
      </header>
      {data.posts.map(post => (
        <Post key={post.id} post={post} />
      ))}
    </>
  );
}

使用useMutation创建和编辑新帖子

之后,我们将看到如何使用该useMutation钩子创建新帖子。为了做到这一点,我们将看一下如何使用GraphQL变量传递我们的突变动态值,该值将随着每次执行而变化。

接下来,我们将研究如何编辑帖子。为此,我们需要获取单个帖子并将其显示在表单中,以便我们的用户可以更改数据。然后,我们需要根据帖子ID执行一个来执行更新。React + GraphQL 2020速成课程

处理加载和错误

在接下来的讲座中,我们将介绍一些用于处理数据加载过程的基本模式。

在执行变异时,这样做很重要,以确保在执行变异时不会多次提交表单。我们还将研究在突变未正确执行的情况下如何处理错误。React + GraphQL 2020速成课程

删除帖子

最后,我们将介绍如何从应用程序中删除帖子。首先,我们将确认用户是否要删除自己发表的帖子,然后执行变异。

此外,我们将研究如何使用refetchApollo提供给我们的有用功能来响应突变而更新UI 。这将使我们能够按需重新执行查询。在这种情况下,我们将在成功执行删除突变后执行此操作。React + GraphQL 2020速成课程

喜欢 (0)
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址