0

Relay Modern Hello World

使用 React 和 Relay Modern 加载一个查询的基本应用程序。「A basic app that loads one query with React and Relay Modern」

Main metrics

Github stars Tracking Chart

很遗憾！原 repo: https://github.com/apollographql/relay-modern-hello-world 在 GitHub 上已经 "404" 了。请换用其 Fork 版或寻找其他替代品。

Relay Modern Hello World

这是一个简单的弹出的 create-react-app 项目，其中添加了最小的部分用于加载查询，其中Relay Modern 发布候选人。 它调用了我们用于许多示例应用程序的远程服务器，即 GitHunt 应用程序，它就像GitHub的Product Hunt的克隆库。 您可以访问 GraphiQL ，以及服务器代码也可以使用。

这个例子是作为关于Relay Modern的深入博客文章的一部分准备的。

运行应用程序
yarn
yarn start

如果您编辑查询码，请运行 Relay 编译器：

yarn run relay
# or, to watch files and rerun
yarn run relay -- --watch
代码说明

以下是要查看的部分：

schema.graphql

这是模式。我们需要将这个文件传递给 relay-compiler 。

scripts/getSchema.js

这是一个我为了内省远程服务器而编写的简单脚本，并以 .graphql 格式保存架构。

package.json

这里我们为构建过程添加了一些脚本：

"relay": "relay-compiler --src ./src --schema schema.graphql",
"get-schema": "node scripts/getSchema.js"
.babelrc

我们需要安装 babel-relay-plugin 并将其添加到 .babelrc 中：

{
  "presets": [
    "react-app"
  ],
  "plugins": [
    "relay"
  ]
}
/AppFeedQuery.graphql.js

这是 yarn run relay 运行中继编译器时生成的代码。它基于 App.js 中的查询。

src/createRelayEnvironment.js

该文件创建一个中继环境和一个网络实例，该实例配置Relay具有从远程服务器获取查询的功能。

src/App.js

这是整个应用程序代码，其中最重要的部分是 QueryRenderer ，它调用Relay将数据注入 Feed 组件。

Overview

Name With Ownerapollographql/relay-modern-hello-world
Primary LanguageJavaScript
Program languageJavaScript, HTML, CSS (Language Count: 3)
Platform
License:Other
Release Count0

Relay Modern Hello World

This is a simple ejected create-react-app project with the minimal parts added to load a query with the Relay Modern release candidate. It calls a remote server that we use for a lot of example apps, the GitHunt app, which is like a clone of Product Hunt for GitHub repositories. You can get access to GraphiQL here, and the code for the server is available as well.

This example was prepared as part of an in-depth blog post about Relay Modern.

Running the app

yarn
yarn start

If you edit the query code, run the Relay Compiler:

yarn run relay
# or, to watch files and rerun
yarn run relay -- --watch

Code explanation

Here are the parts to look at:

schema.graphql

This is the schema. We need this file to be passed into the relay-compiler.

scripts/getSchema.js

This is a simple script I wrote up to introspect a remote server and save the schema in .graphql format.

package.json

Here we have added some scripts for the build process:

"relay": "relay-compiler --src ./src --schema schema.graphql",
"get-schema": "node scripts/getSchema.js"

.babelrc

We needed to install the babel-relay-plugin and add it to .babelrc:

{
  "presets": [
    "react-app"
  ],
  "plugins": [
    "relay"
  ]
}

src/generated/AppFeedQuery.graphql.js

This is the code that gets generated when you yarn run relay to run the Relay compiler. It's based on the query in App.js.

src/createRelayEnvironment.js

This file creates a Relay Environment and a Network instance that configures Relay with a function to fetch queries from the remote server.

src/App.js

This is the entirety of the application code, with the most important part being the QueryRenderer which calls Relay to inject data into the Feed component.

To the top