使用React-Relay Modern加载graphql时出错 [英] Error loading graphql with react-relay modern

问题描述

我正在使用Relay开发一个与graphql一起使用的本机应用程序. 在较早版本之前，我一直在'sibelius' react- native-relay-example 也结合了这两篇文章:秒.

I am developing an react-native application using Relay for working with graphql. Before earlier versions I have been using Relay classic with RootContainer and renderer following the 'sibelius' react-native-relay-example also combined with these two posts: first and 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'

So I have changed the react-relay version from 0.10.0 to 1.0.0 and for starters put a simple query at first screen using relay modern implementation. I did not change babel-relay-plugin. When ever I run the app I getgraphql: 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时已经知道了.

I am also a starter at developing react-native apps and overall using graphql so I have this constant feeling I am missing something not mentioned in the docs which I suppose to already know when working with react.

这是我的.babelrc文件:

This is my .babelrc file:

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

babelRelayPlugin.js

babelRelayPlugin.js

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

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

I am creating a RelayEnvironment which I am importing to the 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:

This is my QueryRenderer in jsx:

        <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中运行此查询，我会得到预期的结果.

If I run this query in graphiql I do get the expected result.

推荐答案

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

babel-relay-plugin is now babel-plugin-relay in Relay Modern, and the usage isn't the same anymore - see here.

您现在需要三件事:

• 以GraphQL表示法的模式，在一个单独的文件中(它是您传递给的字符串buildSchema )
• yarn add -D babel-plugin-relay-您无需再进行自定义
• 要在后台安装并运行relay-compiler

• Your schema in GraphQL notation, in a separate file (it is the string you pass to buildSchema)
• yarn add -D babel-plugin-relay - you do not need to make a custom one anymore
• To install and run the relay-compiler in the background

这是它的工作方式:

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

• You pass your schema to the relay-compiler via command-line and run it on your sources: relay-compiler --src ./src --schema path/schema.graphql
• The relay compiler generates definitions for your queries in a folder called __generated__ next to your files
• The babel-plugin-relay replaces your queries by a require() call to the corresponding generated GraphQL definition by the relay compiler

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

目录结构

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

schema.graphql

schema.graphql

type Query {
  user: User!
}

type User {
  name: String!
}

src/App.js

src/App.js

// ...

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

// ...

.babelrc

{
  "plugins": ["relay"]
}

package.json

package.json

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

然后在单独的终端中运行yarn relay或npm run relay.
照常启动您的应用.

Then, run yarn relay or npm run relay in a separate terminal.
Start your app as usual.

这篇关于使用React-Relay Modern加载graphql时出错的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！