世界杯2018年决赛_我们如何构建2018年世界杯GraphQL API

世界杯2018年决赛

by Michael Hunger

迈克尔·汉格(Michael Hunger)

我们如何构建2018年世界杯GraphQL API (How we built the 2018 World Cup GraphQL API)

After the second round of matches at World Cup 2018 got underway, we wanted to create an easy way for people to answer all their questions about the teams involved.

在2018年世界杯第二轮比赛进行之后，我们希望为人们创造一种简单的方式来回答人们对所涉及球队的所有疑问。

TL; DR (TL;DR)

We’ve created a Neo4j backed GraphQL API for World Cup 2018. You can play with it here.

我们已经为2018年世界杯创建了Neo4j支持的GraphQL API。您可以在此处使用它。

构建由Neo4j支持的GraphQL API (Building a GraphQL API backed by Neo4j)

We’d already created a database with all the World Cup Data for people to use and query with, but we wanted to make the data accessible to people who don’t know Neo4j’s query language, Cypher.

我们已经创建了一个包含所有世界杯数据的数据库 供人们使用和查询，但我们希望使不了解Neo4j查询语言Cypher的人们可以访问数据。

GraphQL to the rescue!

GraphQL可以解救！

Before we get to that, let’s first take a look at the Neo4j graph model that we’ve created.

在开始之前，我们先来看一下我们创建的Neo4j图形模型。

The WorldCup node sits in the middle of our graph, and all other parts of the model revolve around that. We have one WorldCup node for each tournament.

WorldCup节点位于图的中间，模型的所有其他部分都围绕该图展开。 每个锦标赛都有一个WorldCup节点。

Next up we have the host Country which is connected to the WorldCup node by a HOSTED_BY relationship. Matches also belong to a WorldCup, and each Country names a Squad of Players that will represent them in a WorldCup tournament.

接下来，我们有一个主机国家/地区 ，该国家/地区通过HOSTED_BY关系连接到WorldCup节点。 比赛也属于WorldCup ，每个国家/地区都指定一个球员小队，代表他们参加WorldCup 比赛。

A player is connected to an Appearance node for each match that they participate in either as a starter or substitute. If they score a Goal, the Appearance node will connect to that Goal node.

对于玩家作为先发球员或替补球员参加的每场比赛，其都会连接到外观节点。 如果他们得分，则“外观”节点将连接到该“目标”节点。

GRANDstack入门套件 (The GRANDstack Starter Kit)

Ok that’s enough Neo4j, let’s get back to GraphQL.

好了，Neo4j就足够了，让我们回到GraphQL。

The GRANDstack combines GraphQL, React, Apollo and Neo4j Database into an easy to use bundle for quickly building APIs and apps. It uses the GraphQL schema to automatically transpile GraphQL queries to single Neo4j queries and is able to auto-generate all queries, mutations, and fields from the annotated schema.

所述GRANDstack结合ģraphQL，R EACT，A波多博罗和N eo4j d atabase到一个易于使用的束用于快速构建API和应用程序。 它使用GraphQL架构自动将GraphQL查询转换为单个 Neo4j查询，并能够从带注释的架构自动生成所有查询，变异和字段。

We used the GRANDstack.io starter kit to create a GraphQL API on top of our existing Neo4j database.

我们使用GRANDstack.io入门工具包在现有Neo4j数据库之上创建了GraphQL API。

It consist of two parts: a backend api and a front-end ui. The backend serves the GraphQL API and also a GraphQL Playground (a really neat browser and editor for GraphQL queries), which also provides the data schema, docs, and auto-completion.

它由两部分组成：后端api和前端ui 。 后端为GraphQL API和GraphQL Playground(用于GraphQL查询的真正简洁的浏览器和编辑器)提供服务，还提供数据模式，文档和自动完成功能。

We forked it to our own repository and then merged it back to a branch worldcup for you to use.

我们将其分叉到我们自己的存储库中，然后将其合并回分支worldcup供您使用。

The first step is to create a GraphQL schema. You can see what we came up with below, which closely matches what we have above in our Graph Model.

第一步是创建GraphQL模式 。 您可以在下面看到我们提出的内容，这些内容与我们在Graph模型中上面的内容非常匹配。

A minimal schema looks like this:

最小架构如下所示：

We extended it quite a bit with some GRANDstack specific Neo4j extensions to have some alternative mappings and so on.

我们使用一些特定于GRANDstack的Neo4j扩展对其进行了相当多的扩展，以具有一些替代的映射等等。

grand-stack/grand-stack-startergrand-stack-starter - Simple starter project for GRANDstack full stack appsgithub.com

grand-stack / grand-stack-starter grand-stack-starter-用于GRANDstack完整堆栈应用程序的简单启动程序项目 github.com

Once we’d defined the schema, we updated our .env file to point to our Neo4j Cloud (https://neo4j.com/cloud/) hosted database.

定义架构后，我们将更新.env文件，使其指向我们的Neo4j Cloud(https://neo4j.com/cloud/)托管数据库。

NEO4J_URI=bolt://c27d992b.databases.neo4j.ioNEO4J_USER=worldcupNEO4J_PASSWORD=worldcup

You can run this locally by executing yarn && yarn start. That will launch the Playground at http://localhost:4000, where you can start to play around with some queries.

您可以通过执行yarn && yarn start在本地运行。 这将在http：// localhost：4000启动Playground ，您可以在其中开始一些查询。

We can write some queries to find the world’s best player.

我们可以写一些查询来找到世界上最好的球员。

Of course we can find out much more about him.

当然，我们可以找到有关他的更多信息。

部署到zeit.now (Deploy to zeit.now)

Now we’re ready to deploy. We could deploy our service to anywhere that hosts Node.js apps, but @Will.Lyon recommended Zeit Now — a great and easy to use service for hosting your app that has an easy to use free plan for small projects.

现在我们准备部署。 我们可以将服务部署到托管Node.js应用程序的任何地方，但@ Will.Lyon建议使用Zeit Now (一项出色且易于使用的服务，用于托管您的应用程序，该应用程序具有易于使用的免费计划，适用于小型项目。

We just install the service and then run the now command in our directory to deploy. For stable URLs, you can alias the project to a fixed name.

我们只需要安装服务，然后在目录中运行now命令即可进行部署。 对于稳定的URL，可以将项目别名为固定名称。

The GraphQL server is deployed at https://worldcup-2018.now.sh/ and is ready for use now. Let’s have a look at the types of queries we can run against the dataset.

GraphQL服务器部署在https://worldcup-2018.now.sh/并可以立即使用。 让我们看一下可以针对数据集运行的查询类型。

葡萄牙与摩洛哥 (Portugal vs. Morocco)

As I’m writing this post, Portugal is playing Morocco. We can check for the latest score by executing this GraphQL query in the playground defined above.

在我撰写本文时， 葡萄牙正在扮演摩洛哥。 我们可以通过在上面定义的操场上执行此GraphQL查询来检查最新分数。

Portugal are 1–0 up at the moment, and it’s no surprise to learn that Cristiano Ronaldo was the scorer.

葡萄牙目前上升1-0，得知克里斯蒂亚诺·罗纳尔多是得分手也就不足为奇了。

克里斯蒂亚诺是谁？ (Who is Cristiano?)

If we want to learn more about Cristiano, we can query for players as well. For example, the following query will show us his date of birth and how many goals he’s ever scored in the World Cup, as well as how many goals he has scored this time around:

如果我们想了解有关克里斯蒂亚诺的更多信息，我们也可以查询球员。 例如，以下查询将向我们显示他的出生日期，他在世界杯上打进了多少个进球以及这次他打进了多少个进球：

So he’s got 4 goals in World Cup 2018 and 7 in total, which means he’s got more goals in this tournament than the previous ones combined!

因此他在2018年世界杯足球赛中有4个进球，总共7个进球，这意味着他在本次锦标赛中拥有的进球数比以前的总和还多！

1990年德国得分 (Germany’s score in 1990)

Although Germany didn’t get off to a great start in this World Cup, we can write a nostalgic query to find out the score of the 1990 World Cup final:

尽管德国在本届世界杯比赛中开局不佳，但我们可以写一个怀旧的查询来查询1990年世界杯决赛的得分：

1966年的艰难时期:( (Bad times in 1966 :()

Or we could look back to 1966, as my colleague Mark forced me to do:

或者我们可以回顾1966年，就像我的同事Mark强迫我做的那样：

保持数据新鲜 (Keeping the data fresh)

The database is being updated via a Lambda job every few minutes while matches are being played, so the data should be reasonably fresh whenever you query it.

在进行比赛时，每隔几分钟就会通过Lambda作业更新数据库，因此无论何时查询，数据都应该是相当新鲜的。

React UI (The React UI)

The front-end ui is basically just a React app that uses Apollo Client to query our API and render the results in components.

前端ui基本上只是一个React应用，它使用Apollo Client查询我们的API并将结果呈现在组件中。

Please note that the current React code is really ugly and horrible. We leave that as challenge to you to build beautiful web and/or mobile apps using the World Cup GraphQL API. :)

请注意，当前的React代码确实很丑陋和可怕。 对于您来说，使用World Cup GraphQL API构建漂亮的Web和/或移动应用程序是您的挑战。 :)

Of course you can also use Vue or Angular or other ui-frameworks you love.

当然，您也可以使用Vue或Angular或您喜欢的其他ui框架。

It connects to the URL provided in the .env file, where we just put either our local http://localhost:4000 or our now.sh URI.

它连接到.env文件中提供的URL，我们只在其中放置了本地http://localhost:4000或now.sh URI。

REACT_APP_GRAPHQL_URI=https://worldcup-2018.now.sh/

Again, a single now command deploys our UI as well. In our case we don’t need it, but Zeit now has support if you have any secret credentials.

再次，单个now命令也将部署我们的UI。 在我们的情况下，我们不需要它，但是Zeit现在可以为您提供任何秘密凭据的支持。

GRANDstack Hackathon (GRANDstack Hackathon)

Luckily, the GRANDstack Hackathon is still ongoing to gather great ideas and there are some really cool prizes for your submissions.

幸运的是， GRANDstack Hackathon 仍在继续收集很棒的想法，并且有一些非常不错的奖项供您提交。

Thanks a lot to my colleague Mark Needham for doing all the hard work of putting the data and model together.

非常感谢我的同事Mark Needham所做的辛勤工作，将数据和模型整合在一起。

翻译自: https://www.freecodecamp.org/news/building-the-2018-world-cup-graphql-api-fab40ccecb9e/

世界杯2018年决赛