Почему свойства рендеринга Relay Modern QueryRenderer не определены?

Это моя первая попытка использовать 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

javascript graphql relaymodern
person Ashley Aitken    schedule 15.10.2017    source источник
comment
Вы уверены, что ваш сетевой уровень вызывается? Вы видите свои данные и / или ошибки в response.json ()? В моем случае у меня есть последующий .then(json => { // Allow Relay onError to get fired in case of errors in response // See: https://github.com/facebook/relay/issues/1816 // NOTICE: that data might contain values even when errors present if(json.errors && json.errors.length > 0) { return Promise.reject(json); } return Promise.resolve(json); })   -  person hisa_py    schedule 16.10.2017
comment
Да, я вижу правильные данные в ответе. Вот почему я был уверен, что с сетью все в порядке. Никакой ошибки при вызове рендеринга тоже нет. Спасибо за ваши Коментарии. Я попробую ваше предложение, приятное дополнение.   -  person Ashley Aitken    schedule 16.10.2017

Ответы (1)


arrow_upward
1
arrow_downward

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);
  })
);
person Ng Thong    schedule 25.10.2017
comment
Спасибо, но я не уверен, что имя параметра (props, relayProps, x, y, z, ...) имеет значение в этом случае? Я думаю, что код просто определяет функцию, которая принимает деконструированный объект с двумя атрибутами и использует эти атрибуты внутри функции. Пожалуйста, поправьте меня, если я ошибаюсь. - person Ashley Aitken; 25.10.2017
comment
render={({ error, props, retry }) => { }} или render={(relayProps) => { const { error, props, retry } = relayProps; }} вы это понимаете? - person Ng Thong; 26.10.2017
comment
Не уверен, почему это было отклонено. Имя имеет значение, если вы пытаетесь деструктурировать параметр, он прав. - person bplittle; 10.09.2020
comment
это не имеет значения, это просто синтаксис назначения ES6 Destructuring - person Ng Thong; 22.09.2020