react-relayモダンでgraphqlをロードする際のエラー

Question

graphqlを使用するためにRelayを使用して反応ネイティブアプリケーションを開発しています。 以前のバージョンでは、「sibelius」react-native-relay-exampleの次の2つの投稿「first」および「 second」と組み合わせて、RootContainerとレンダラを使用した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を使用しているので、私はいつも知っていると思われるドキュメントに記載されていない何かが不足していると感じています。反応する。

これは私の.babelrcファイルです：私はQueryRendererにインポートしていますRelayEnvironmentを作成してい

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

babelRelayPlugin.js

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

：

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は、リレーモダンでbabel-plugin-relayになりました。使用方法はこれ以上同じではありません。see here。

あなたは今、3つの事を必要とする：

• GraphQL表記であなたのスキーマ、別のファイルに
• yarn add -D babel-plugin-relay（それはあなたがbuildSchemaに渡す文字列がある） - カスタムを作成する必要はありません1もう
ここで背景

でrelay-compilerをインストールして実行するに

は、それがどのように動作するかです：

• あなたは、コマンドラインを介して中継-コンパイラにスキーマをパスし、自分のソースにそれを実行します。relay-compiler --src ./src --schema path/schema.graphql
• リレーコンパイラはあなたのファイルの横__generated__
• というフォルダにクエリの定義を生成し、 babel-plugin-relayはリレーコンパイラ

---

例セットアップANによって対応して生成GraphQL定義にrequire()コールでクエリを置き換えますDの使用

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を実行します。
いつものようにアプリを起動してください。