Relay ModernがGraphQLサーバにネットワークリクエストを送信していません

Question

最近、Relay Modernを見て、GraphQLバックエンドを使って簡単なアプリケーションを作成しました。しかし、私は、データを取得するためにネットワーク要求を送信しないRelayに問題があります。私は以下のコードについて100％自信がありませんが、少なくともhttp://localhost:3000/graphqlにネットワークリクエストを送信することを期待していますが、devtoolsはそのようなリクエスト（またはサーバーログ）を表示しません。

environment.js

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

const store = new Store(new RecordSource()); 

const network = Network.create((operation, variables) => 
    fetch('http://localhost:3000/graphql', { 
    method: 'POST', 
    headers: { 
     // Add authentication and other headers here 
     Accept: 'application/json', 
     'Content-Type': 'application/json', 
    }, 
    body: JSON.stringify({ 
     query: operation.text, // GraphQL text from input 
     variables, 
    }).then(res => res.json()), 
    }) 
); 

const environment = new Environment({ 
    network, 
    store, 
}); 

export default environment; 

import React, { Component } from 'react'; 
import { graphql, QueryRenderer } from 'react-relay'; 

import environment from '@utilities/environment'; 

class App extends Component { 
    render() { 
    console.log(this.props); // Empty object {} here 

    return (
     <div> 
     Hello World! 
     </div> 
    ); 
    } 
} 

const Query = graphql` 
    query AppQuery { 
    user(id: "u01") { 
     id 
     username 
    } 
    } 
`; 

const AppQuery =() => 
    (<QueryRenderer 
    environment={environment} 
    graphql={Query} 
    variables={{}} 
    render={({ error, props }) => { 
     console.log(error, props); // Get (undefined, {}) here 
     if (error) { 
     return <div>{error.message}</div>; 
     } else if (props) { 
     return <App {...props} />; 
     } 
     return <div>Loading!</div>; 
    }} 
    />); 

export default AppQuery; 

App.jsx私は明らかに何かが足りないのですか？コンソール/ウェブパックのエラーはなく、Appは適切にレンダリングされますが、GraphQL/Relayデータはありません。ありがとう！

Answer 1

私はあなたの環境は大丈夫だと思います。

FragmentContainerを作成し、Relay Compilerをセットアップ/実行して、クエリをリレーするために必要なgraphqlファイルを生成することができます。

おそらく、FragmentContainerを使用してデータ要件をAppで宣言し、配置する必要があります。データがアプリケーションでマスクされているため、小道具では利用できないため、フラグメントコンテナが必要です（see moreここではマスクされています）。あなたはこのようなcreateFragmentContainer()を使用する必要があります

：

App = createFragmentContainer(
    App, 
    graphql` 
    fragment App_users on User { // The fragment name should follow the convention <FileName>_<propName>, so maybe you might the App component to an another file. 
     user(id: "u01") { 
     id 
     username 
     } 
    } 
    `, 
); 

にクエリを変更します。完了したら、あなたはリレーコンパイラを実行できるようにしてgraphqlを持っている必要があり

graphql` 
    viewer { 
    ...App_users_viewer 
    } 
` 

は、ファイルを生成しました