2

これは、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
4

1 に答える 1