javascript - 为什么 Relay Modern QueryRenderer 渲染 Prop 未定义？

Question

这是我第一次尝试使用 Relay Modern。从 PostgraphQL GraphQL 服务器 获取特定用户。它正在成功获取数据但未传递给渲染函数:

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

Answer 1

props 不是 relayprops

    render={({ error, props }) => {
      if (error) {
        return <div>{error.message}</div>;
      } else if (props) {
        ...
      }
      return <div>Loading...</div>;
    }}

和

fetch(GRAPHQL_URL, {
  method: 'POST',
  get headers() {
    return {
      'Content-Type': 'application/json',
      'Accept': 'application/json',
    };
  },
  body: JSON.stringify({
    query: operation.text, // GraphQL text from input
    variables
  })
})
  .then(response => response.json())
  .then((json) => {
    // https://github.com/facebook/relay/issues/1816
    if (operation.query.operation === 'mutation' && json.errors) {
      return Promise.reject(json);
    }

    return Promise.resolve(json);
  })
);