您的位置:首页 > Web前端 > React

react实战课程_React + GraphQL 2020速成课程

2020-08-21 00:15 411 查看 https://blog.csdn.net/cumian81


Have you heard a lot about using React with GraphQL but don't know how to combine them to build amazing apps? In this crash course, you'll learn how to do just that by building a complete social blogging app.

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

Within an afternoon, you will gain the core skills to build your own React and GraphQL projects.


Want to get started now? You can access the entire course right here.

想立即开始吗? 您可以在此处访问整个课程。

为什么您应该通过GraphQL学习React (Why you should learn React with GraphQL 🎓)

React is the go-to library for building amazing app experiences with JavaScript. GraphQL, on the other hand, is a tool that gives us a better, more straightforward means of getting and changing our data.

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

That data could be from a standard database (as we'll be using in our app) or as React frameworks like Gatsby have made possible, even from static files such as markdown files. Regardless of how it's stored, GraphQL makes working with data in our apps better.

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

We'll see how to leverage the powers of React and GraphQL by creating a social blogging app from start to finish, where you can create, read, edit and delete posts.


Click to access the course


我们将使用什么工具🛠️ (What tools we'll be using 🛠️)

The crash course is meant for developers who are somewhat familiar with React (including the core React Hooks, such as

), but aren't familiar with GraphQL yet.

速成课程适用于那些对React有点熟悉(包括核心React Hooks,例如


Basic React knowledge is assumed, but GraphQL knowledge is not required. We'll cover all the core GraphQL concepts you need along the way.

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

Throughout the course, we'll utilize the following technologies to create our app:


  • React (to build our user interface)

    React (构建我​​们的用户界面)

  • GraphQL (to get and change data in a declarative way)

    GraphQL (以声明的方式获取和更改数据)

  • Apollo Client (to allow us to use React and GraphQL together)

    Apollo客户端 (允许我们一起使用React和GraphQL)

  • Hasura (to create and manage our GraphQL API + database)

    Hasura (用于创建和管理我们的GraphQL API +数据库)

To top it off, we'll be using the online IDE CodeSandbox. This will allow us to code our entire application within the browser in realtime, without the need to create any files, folders, or install dependencies on our own.

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

从头开始创建GraphQL API (Creating a GraphQL API from scratch)

To get started working with GraphQL, we'll see how to make an entire GraphQL API from scratch that will communicate with our database.

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

Fortunately, using the (free) service Hasura, this process is very simple and straightforward. Within seconds, we'll see how to create and deploy a complete GraphQL API to the web, which is connected to a Postgres database that will take care of storing our app data.

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

Click to watch this lecture


熟悉GraphQL (Getting familiar with GraphQL)

In the second lecture, we'll cover how to write in the GraphQL language using our API's built-in console called GraphiQL.


First, we will create a table in our database for all of our posts data. After which, Hasura will automatically create the queries and mutations we need, which are the names of GraphQL operations that allow us to get and change data in our database.

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

Throughout this lesson, we'll get very familiar performing queries and mutations in GraphiQL, which will enable us to get entire sets of posts and individual posts, as well as to create, update, and delete our individual post data.


Click to watch this lecture


使用Apollo Client将React与我们的GraphQL API连接 (Connecting React with our GraphQL API using Apollo Client)

Now that we're comfortable with using GraphQL and understand its core features, we'll see how to connect it with our React client.


The way that we connect our React app with the GraphQL API we created is through a library called Apollo. We'll see how to set up the Apollo client, by providing the GraphQL endpoint, which points to our API, like so:

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

import ApolloClient from "apollo-boost";

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

With our newly created client, we have the ability to execute any GraphQL operation through React. To do this, however, we need to pass our client to our entire to all of our React components. We do that with the help of the Apollo provider, as you see below:

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

Click to watch this lecture


使用useQuery获取帖子 (Getting posts with useQuery)

After setting up our client, we'll see how to execute different GraphQL operations with them, using some special React hooks that come with the package




The hook that allows us to query for data with GraphQL is called

. With it, we'll first see how to get and display all of our post data in our homepage.


。 有了它,我们首先将了解如何在我们的主页中获取和显示所有帖子数据。

Additionally, we'll learn how to write our GraphQL queries directly in our JavaScript files with the help of a special function called




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

export const GET_POSTS = gql`
query getPosts {
posts {

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
{data.posts.map(post => (
<Post key={post.id} post={post} />

使用useMutation创建和编辑新帖子 (Creating and editing new posts with useMutation)

After that, we'll see how to create new posts with the

hook. In order to do this, we'll take a look at how to work with GraphQL variables to pass our mutation dynamic values that will change with each execution.


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

Following that we'll take a look at how to edit our posts. To do so, we'll need to fetch an individual post and display it within our form, so that our user can make changes to the data. Then we'll need to execute a mutation that will perform the update, based on the posts id.

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

Click to watch this lecture


处理加载和错误 (Handle loading and errors)

In the following lecture, we'll cover some essential patterns for handling the process of loading our data.


It's important to do so when we execute a mutation, to make sure we don't submit our forms multiple times as our mutation is being executed. We'll also take a look at how to handle errors in the event that our mutation is not executed correctly.

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

Click to watch this lecture


删除帖子 (Deleting posts)

Finally, we'll cover how to delete posts from our app. First, we'll confirm that the user wants to actually delete the post that they've made, then perform the mutation.

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

Additionally, we'll take a look at how to update our UI in response to mutations with  the helpful

function that Apollo gives us. It will enable us to re-execute a query on demand. In this case, we'll do it after the delete mutation has been successfully performed.


函数更新用户界面,以响应突变。 这将使我们能够按需重新执行查询。 在这种情况下,我们将在成功执行删除突变后执行此操作。

Click to watch this lecture


立即观看课程📺 (Watch the course now 📺)

React and GraphQL are at the core of tons of powerful web and mobile apps and there's never been a better time to learn the two.


Take the course and, within an hour, you'll learn core concepts that will meaningfully grow your developer skillset and give you the key insights to create your own React and GraphQL projects!


Click to watch the course


翻译自: https://www.freecodecamp.org/news/the-react-graphql-2020-crash-course/


内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息