react 对象克隆_如何使用React＆GraphQL（Dune World Edition）创建全栈Yelp克隆

react 对象克隆

I must not fear. Fear is the mind-killer. Fear is the little-death that brings total obliteration. I will face my fear. I will permit it to pass over me and through me. And when it has gone past I will turn the inner eye to see its path. Where the fear has gone there will be nothing. Only I will remain. - "Litany Against Fear," Frank Herbert, Dune

我一定不要害怕。 恐惧是心灵的杀手。 恐惧是带来彻底灭绝的小死。 我将面对我的恐惧。 我将允许它通过我并通过我。 当它过去时，我会转向内在的目光，看看它的路径。 恐惧消失的地方将一无所有。 只有我会留下来。 －《反对恐惧的植物学》，弗兰克·赫伯特，沙丘

You may be wondering, "What does fear have to do with a React app?" First of all, there's nothing to fear in a React app. In fact, in this particular app, we banned fear. Isn't that nice?

您可能想知道，“恐惧与React应用程序有什么关系？” 首先，在React应用程序中没有什么可担心的。 实际上，在这个特定的应用程序中，我们禁止了恐惧。 那不是很好吗？

Now that you're ready to be fearless, let's discuss our app. It's a mini Yelp clone where instead of reviewing restaurants, users review planets from the classic sci-fi series, Dune. (Why? Because there's a new Dune movie coming out... but back to the main point.)

现在您已经准备好无所畏惧，让我们讨论一下我们的应用程序。 这是一个微型Yelp克隆，用户无需查看餐厅，而是查看经​​典科幻电视剧Dune中的行星。 (为什么？因为有一部新的《沙丘》电影上映……但又回到了重点。)

To build our full-stack app, we'll use technologies that make our lives easy.

要构建全栈应用程序，我们将使用使生活变得轻松的技术。

1. React: Intuitive, compositional front-end framework, because our brains like to compose things.

   React ：直观的，组成性的前端框架，因为我们的大脑喜欢组成事物。

2. GraphQL: You may have heard many reasons why GraphQL is awesome. By far, the most important one is developer productivity and happiness.

   GraphQL ：您可能已经听说了GraphQL很棒的许多原因。 到目前为止，最重要的是开发人员的生产力和幸福感 。

3. Hasura: Set up an auto-generated GraphQL API on top of a Postgres database in under 30 seconds.

   Hasura ：在30秒内在Postgres数据库的顶部设置一个自动生成的GraphQL API。

4. Heroku: To host our database.

   Heroku ：托管我们的数据库。

而GraphQL给我带来怎样的幸福？ (And GraphQL gives me happiness how?)

I see you're a skeptical one. But you'll most likely come around as soon as you spend some time with GraphiQL (the GraphQL playground).

我看到你是一个怀疑的人。 但是，一旦在GraphiQL(GraphQL游乐场)上花了一些时间，您很可能很快就会出现。

Using GraphQL is a breeze for the front-end developer, compared to the old ways of clunky REST endpoints. GraphQL gives you a single endpoint that listens to all your troubles... I mean queries. It's such a great listener that you can tell it exactly what you want, and it will give it to you, nothing less and nothing more.

与笨拙的REST端点的旧方法相比，使用GraphQL对于前端开发人员而言是轻而易举的事。 GraphQL为您提供了一个侦听所有麻烦的终结点……我的意思是查询。 这是一个很棒的听众，您可以准确地告诉它您想要什么，它将为您提供任何帮助。

Feeling psyched about this therapeutic experience? Let's dive into the tutorial so you can try it ASAP!

对这种治疗经验感到不安？ 让我们深入本教程，以便您可以尽快尝试！

👉🏽 Here's the repo if you'd like to code along.

if如果您想一起编码， 这是仓库。

P技术1：S操作搜索 (Part 1: Search)

步骤 1：部署到Heroku (Step 1: Deploy to Heroku)

The first step of every good journey is sitting down with some hot tea and sipping it calmly. Once we've done that, we can deploy to Heroku from the Hasura website. This will set us up with everything we need: a Postgres database, our Hasura GraphQL engine, and some snacks for the journey.

每个美好旅程的第一步是坐下来喝杯热茶，然后从容地喝着茶。 完成此操作后，我们可以从Hasura网站部署到Heroku。 这将为我们提供所需的一切：Postgres数据库，我们的Hasura GraphQL引擎以及旅途中的一些小吃。

步骤2：建立行星表格 (Step 2: Create planets table)

Our users want to review planets. So we create a Postgres table via the Hasura console to store our planet data. Of note is the evil planet, Giedi Prime, which has been drawing attention with its unconventional cuisine.

我们的用户想要审查行星。 因此，我们通过Hasura控制台创建了一个Postgres表来存储我们的星球数据。 值得注意的是邪恶的星球Giedi Prime，其非常规美食引起了人们的关注。

Meanwhile in the GraphiQL tab: Hasura has auto-generated our GraphQL schema! Play around with the Explorer here 👇🏽

同时在GraphiQL选项卡中：Hasura自动生成了我们的GraphQL模式！ 在这里玩探索器👇🏽

第 3步：创建React应用 (Step 3: Create React app)

We'll need a UI for our app, so we create a React app and install some libraries for GraphQL requests, routing, and styles. (Make sure you have Node installed first.)

我们的应用需要一个UI，因此我们创建一个React应用并为GraphQL请求，路由和样式安装一些库。 (确保首先安装了Node 。)

第 4步：安装Apollo Client (Step 4: Set up Apollo Client)

Apollo Client will help us with our GraphQL network requests and caching, so we can avoid all that grunt work. We also make our first query and list our planets! Our app is starting to shape up.

Apollo Client将帮助我们处理GraphQL网络请求和缓存，因此我们可以避免所有繁琐的工作。 我们还进行第一个查询并列出我们的行星！ 我们的应用程序开始成形。

We test our GraphQL query in the Hasura console before copy-pasting it into our code.

我们先在Hasura控制台中测试GraphQL查询，然后再将其复制粘贴到我们的代码中。

步骤 5：样式清单 (Step 5: Style list)

Our planet list is nice and all, but it needs a little makeover with Emotion (see repo for full styles).

我们的星球清单很不错，但需要通过Emotion进行一些修改(有关完整样式，请参见repo )。

步骤 6：搜寻表单和状态 (Step 6: Search form & state)

Our users want to search for planets and order them by name. So we add a search form that queries our endpoint with a search string, and pass in the results to Planets to update our planet list. We also use React Hooks to manage our app state.

我们的用户想要搜索行星并按名称排序。 因此，我们添加了一个搜索表单，该表单使用搜索字符串查询端点，并将结果传递给Planets以更新我们的Planet列表。 我们还使用React Hooks来管理我们的应用程序状态。

步骤 7：感到骄傲 (Step 7: Be proud)

We've already implemented our planet list and search features! We lovingly gaze upon our handiwork, take a few selfies together, and move on to reviews.

我们已经实现了我们的星球列表和搜索功能！ 我们深情地凝视着我们的手工作品，一起拍了几张自拍照，然后继续进行评论。

P技术2：L IVE评论 (Part 2: Live reviews)

第 1步：创建评论表 (Step 1: Create reviews table)

Our users will be visiting these planets, and writing reviews about their experience. We create a table via the Hasura console for our review data.

我们的用户将访问这些星球，并撰写有关其体验的评论。 我们通过Hasura控制台为检查数据创建一个表。

We add a foreign key from the planet_id column to the id column in the planets table, to indicate that planet_ids of reviews have to match id's of planets.

我们将planet_id列中的外键添加到planets表的id列中，以指示reviews planet_id必须与planets id匹配。

步骤 2：T货架关系 (Step 2: Track relationships)

Each planet has multiple reviews, while each review has one planet: a one-to-many relationship. We create and track this relationship via the Hasura console, so it can be exposed in our GraphQL schema.

每个星球都有多个评论，而每个评论都有一个星球：一对多关系。 我们通过Hasura控制台创建并跟踪此关系，因此可以在我们的GraphQL模式中公开它。

Now we can query reviews for each planet in the Explorer!

现在，我们可以在资源管理器中查询每个行星的评论！

步骤 3：设定路由 (Step 3: Set up routing)

We want to be able to click on a planet and view its reviews on a separate page. We set up routing with React Router, and list reviews on the planet page.

我们希望能够单击一个行星并在单独的页面上查看其评论。 我们使用React Router设置路由，并在星球页面上列出评论。

第 4步：安装订阅 (Step 4: Set up subscriptions)

We install new libraries and set up Apollo Client to support subscriptions. Then, we change our reviews query to a subscription so it can show live updates.

我们安装新库并设置Apollo Client以支持订阅。 然后，我们将评论查询更改为订阅，以便可以显示实时更新。

> npm install @apollo/link-ws subscriptions-transport-ws

步骤 5：沙蚕舞 (Step 5: Do a sandworm dance)

We've implemented planets with live reviews! Do a little dance to celebrate before getting down to serious business.

我们已通过实时评论实施了行星！ 开始认真做生意之前，做一些跳舞来庆祝。

P技术3：乙 usiness逻辑 (Part 3: Business logic)

步骤 1： dd输入格式 (Step 1: Add input form)

We want a way to submit reviews through our UI. We rename our search form to be a generic InputForm and add it above the review list.

我们想要一种通过UI提交评论的方法。 我们将搜索表单重命名为通用InputForm ，并将其添加到审阅列表上方。

步骤 2：测试回顾突变 (Step 2: Test review mutation)

We'll use a mutation to add new reviews. We test our mutation with GraphiQL in the Hasura console.

我们将使用一种变异来添加新评论。 我们在Hasura控制台中使用GraphiQL测试我们的突变。

And convert it to accept variables so we can use it in our code.

并将其转换为接受变量，以便我们可以在代码中使用它。

小号 TEP 3：C reate动作 (Step 3: Create action)

The Bene Gesserit have requested us to not allow (cough censor cough) the word "fear" in the reviews. We create an action for the business logic that will check for this word whenever a user submits a review.

Bene Gesserit要求我们在评论中不允许( 咳嗽检查员咳嗽 )“恐惧”一词。 我们为业务逻辑创建一个动作，该动作将在用户提交评论时检查该单词。

Inside our freshly minted action, we go to the "Codegen" tab.

在我们刚创建的动作中，我们转到“ Codegen”选项卡。

We select the nodejs-express option, and copy the handler boilerplate code below.

我们选择nodejs-express选项，然后复制下面的处理程序样板代码。

We click "Try on Glitch," which takes us to a barebones express app, where we can paste our handler code.

我们单击“ Try on Glitch”，这将带我们进入准系统快递应用程序，可以在其中粘贴处理程序代码。

Back inside our action, we set our handler URL to the one from our Glitch app, with the correct route from our handler code.

回到我们的操作内部，我们将Glitch应用程序中的处理程序URL设置为一个，并使用来自处理程序代码的正确路由。

We can now test our action in the console. It runs like a regular mutation, because we don't have any business logic checking for the word "fear" yet.

现在，我们可以在控制台中测试操作。 它像常规变异一样运行，因为我们还没有任何业务逻辑检查“恐惧”一词。

步骤 4： dd业务逻辑 (Step 4: Add business logic)

In our handler, we add business logic that checks for "fear" inside the body of the review. If it's fearless, we run the mutation as usual. If not, we return an ominous error.

在我们的处理程序中，我们添加了业务逻辑来检查评论主体中的“恐惧”。 如果无所畏惧，我们将照常运行突变。 如果不是，则返回不祥的错误。

If we run the action with "fear" now, we get the error in the response:

如果现在以“ fear”运行操作，则会在响应中得到错误：

第 5步：其他评论 (Step 5: Order reviews)

Our review order is currently topsy turvy. We add a created_at column to the reviews table so we can order by newest first.

我们的审查顺序当前是混乱的。 我们在reviews表中添加了created_at列，因此我们可以按照最新的顺序进行排序。

reviews(order_by: { created_at: desc })

步骤 6： dd审查突变 (Step 6: Add review mutation)

Finally, we update our action syntax with variables, and copy paste it into our code as a mutation. We update our code to run this mutation when a user submits a new review, so that our business logic can check it for compliance (ahem obedience ahem) before updating our database.

最后，我们使用变量更新操作语法，并将其复制粘贴到我们的代码中作为变异。 当用户提交新评论时，我们将更新代码以运行此变异，以便我们的业务逻辑可以在更新数据库之前检查它的合规性( ahem服从ahem )。

If we submit a new review that includes "fear" now, we get our ominous error, which we display in the input field.

如果我们现在提交包含“恐惧”的新评论，则会得到不祥的错误，该错误将显示在输入字段中。

步骤7：我们做到了！ 🎉 (Step 7: We did it! 🎉)

Congrats on building a full-stack React & GraphQL app!

恭喜您构建了一个完整的React＆GraphQL应用程序！

未来该何去何从？ (What does the future hold?)

If only we had some spice melange, we would know. But we built so many features in so little time! We covered GraphQL queries, mutations, subscriptions, routing, searching, and even custom business logic with Hasura actions! I hope you had fun coding along.

如果我们有一些香料混合物，我们就会知道。 但是我们在很短的时间内建立了很多功能！ 我们使用Hasura操作介绍了GraphQL查询，变异，订阅，路由，搜索，甚至自定义业务逻辑！ 希望您在编写过程中玩得开心。

What other features would you like to see in this app? Reach out to me on Twitter, and I'll make more tutorials! If you're inspired to add features yourself, please do share – I'd love to hear about them :)

您还想在此应用程序中看到哪些其他功能？ 在Twitter上与我联系，我将提供更多教程！ 如果您有灵感自己添加功能，请共享 -我很想听听他们的信息:)

翻译自: https://www.freecodecamp.org/news/how-to-create-a-full-stack-yelp-clone-with-react-graphql/

react 对象克隆