使用现代反应中继加载graphql时出错

Question

我正在使用 Relay 开发一个 react-native 应用程序来处理 graphql。 在早期版本之前，我一直在使用带有 RootContainer 和渲染器的 Relay Classic，遵循“sibelius”react-native-relay-example 还结合了这两个帖子：first 和 second.

所以我已经将 react-relay 版本从 0.10.0 更改为 1.0.0，并且对于初学者来说，使用中继现代实现在第一个屏幕上放置一个简单的查询。我没有更改 babel-relay-plugin。每当我运行应用程序时，我都会收到graphql: Unexpected invocation at runtime. Either the Babel transform was not set up, or it failed to identify this call site. Make sure it is being used verbatim as 'graphql'

我也是开发 react-native 应用程序和整体使用 graphql 的初学者，所以我一直有这种感觉，我错过了文档中没有提到的东西，我想在使用 react 时已经知道这些东西。

这是我的 .babelrc 文件：

{
  "plugins": ["./data/babelRelayPlugin"],
  "presets": ["react-native"]
}

babelRelayPlugin.js

const getBabelRelayPlugin = require('babel-relay-plugin');
const schemaData = require('./schema.json');
module.exports = getBabelRelayPlugin(schemaData.data);

我正在创建一个 RelayEnvironment，并将其导入到 QueryRenderer：

import {
  Environment,
  Network,
  Store,
  RecordSource
} from 'relay-runtime';

const fetchQuery = (operation, variables, cacheConfig, uploadables) => {
  return (
    fetch('https://../graphql', {
        method: 'POST',
        headers: {
          'content-type': 'application/json'
        },
        body: JSON.stringify({
          query: operation.text,
          variables,
        }),
      }).then( response => {
        return response.json();
      }).catch( err => console.log(err) )
  );
}

const source = new RecordSource();
const store = new Store(source);
const network = Network.create(fetchQuery);
const handlerProvider = null;

export const RelayEnvironment = new Environment({
  handlerProvider,
  network,
  store,
});

这是我在 jsx 中的 QueryRenderer：

        <QueryRenderer
          environment={ RelayEnvironment }
          query={ graphql`query {
            content(path: "/latest-updates"){
              title
              children{
                entries{
                  key: id
                  title
                  flyTitle
                  teaser
                  mainImageObj{
                    path
                  }
                }
              }
            }
          }` }
          render={ ({error, props}) => {
            if(error){
              console.log(error);
            } else if(props) {
              console.log(props);
              return <Text> Done </Text> ;
            } else {
              console.log('loading...');
            }
          }}
        />

如果我在 graphiql 中运行此查询，我会得到预期的结果。

Answer 1

babel-relay-plugin 现在在 Relay Modern 中为 babel-plugin-relay，用法不再相同 - see here。

你现在需要三样东西：

• 您在 GraphQL 表示法中的架构，在一个单独的文件中（它是您传递给 buildSchema 的字符串）
• yarn add -D babel-plugin-relay - 你不再需要定制一个
• 在后台安装和运行relay-compiler

这是它的工作原理：

• 您通过命令行将架构传递给中继编译器并在您的源代码上运行它：relay-compiler --src ./src --schema path/schema.graphql
• 中继编译器会在您的文件旁边名为 __generated__ 的文件夹中为您的查询生成定义
• babel-plugin-relay 将您的查询替换为 require() 调用中继编译器生成的相应 GraphQL 定义

---

设置和使用示例

yarn add -D babel-plugin-relay relay-compiler

目录结构

schema.graphql
src/
  App.js
.babelrc
package.json

schema.graphql

type Query {
  user: User!
}

type User {
  name: String!
}

src/App.js

// ...

const myQuery = graphql`
  query App_ExampleQuery {
    user {
      name
    }
  }
`;

// ...

.babelrc

{
  "plugins": ["relay"]
}

package.json

...
"scripts": {
  "relay": "relay-compiler --src ./src --schema ./schema.graphql --watch",
},
...

然后，在单独的终端中运行 yarn relay 或 npm run relay。
像往常一样启动您的应用程序。