示例设置和用法

Question

我正在使用Relay开发一个使用graphql的react-native应用程序。在早期版本之前，我一直在使用Relay classic和RootContainer以及'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'

我也是使用graphql开发react-native应用程序和整体的初学者所以我有这种不断的感觉我错过了文档中没有提到的内容，我想在使用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。

你现在需要3件事：

您的架构采用GraphQL表示法，位于单独的文件中（它是您传递给buildSchema的字符串）
yarn add -D babel-plugin-relay - 您不再需要自定义
在后台安装并运行relay-compiler

以下是它的工作原理：

您可以通过命令行将架构传递给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。
像往常一样启动你的应用程序。

使用react-relay modern加载graphql时出错

1 个答案:

示例设置和用法