これは、Relay Modern を使用する最初の試みです。から特定のユーザーを取得していPostgraphQL GraphQL Server
ます。データは正常にフェッチされていますが、レンダリング関数に渡されていません:
import {createFragmentContainer, QueryRenderer, graphql} from 'react-relay'
import environment from 'environment'
@CSSModules(styles) export default class Profile extends Component {
render() {
var {props: {children}} = this
return (
<QueryRenderer
environment={environment}
query={graphql`
query ProfileQuery {
userById(id: "f0301eaf-55ad-46db-ac90-b52d6138489e") {
firstName
userName
}
}
`}
render={({error, relayProps}) => {
if (error) {
return <div>{error.message}</div>
} else if (relayProps) {
...
}
return <div>Loading...</div>
}}
/>
)
}
}
「読み込み中...」のみがレンダリングされます。
Graphqlサーバーと環境が正常であるというデータを正常にフェッチするため、私は推測しています。
私は React 16 を使用しておらず、プロジェクトも Redux を使用しています。
RelayProps が値を持たない理由 (relayProps.user など) について何か提案をお願いします。
環境 (ファイル) はメイン アプリケーションにあり、QueryRenderer
コンポーネントはインポートされた npm パッケージ (複数のアプリケーション間で共有される) に含まれています。前述のように、クエリは正常に機能しているように見えるので、これが問題だとは思いませんでした。パッケージでリレー コンパイラも実行しますが、メイン アプリケーションにはリレー コンポーネントがないため実行しません。
必要な場合に備えて、環境は次を使用してセットアップされます。
const {
Environment,
Network,
RecordSource,
Store,
} = require('relay-runtime')
// Instantiate Store for Cached Data
const store = new Store(new RecordSource())
// Create Network for GraphQL Server
const network = Network.create((operation, variables) => {
// GraphQL Endpoint
return fetch(config.gqlapiProtocol + "://" + config.gqlapiHost + config.gqlapiUri + "/a3/graphql" , {
method: 'POST',
headers: {
'Content-Type': "application/json",
'Accept': 'application/json',
},
body: JSON.stringify({
query: operation.text,
variables,
}),
}).then(response => {
return response.json()
})
})
// Instantiate Environment
const environment = new Environment({
network,
store,
})
// Export environment
export default environment