Как захватить ответ на запрос в GraphQL Relay

#reactjs #graphql #relayjs

#reactjs #graphql #relayjs

Вопрос:

Я новичок в relay, у меня есть запрос, который выдает ответ, который я вижу на вкладке network инспектора, но чего я не понимаю, так это как получить этот ответ для использования в моем компоненте. Не мог бы кто-нибудь, пожалуйста, объяснить это?

Мой запрос

 const query = graphql`
query AdvisorProfileQuery($id: ID!) {
    node(id: $id) {
        ...on Advisor {
            name
            postalCode
            products
            referralCode
            status
            updatedAt
        }
    }
}`;
  

и выполняется через средство визуализации

 const QueryRenderer = LoadingQueryRenderer(AdvisorProfile, query);
export default ({ i18n }) => {
return (
    <>
        <QueryRenderer
            params={{ id: id }}
        />
    </>
);
};
  

но каково имя переменной, которая содержит данные, возвращаемые компоненту? Я хочу передать эти данные в качестве реквизита другому компоненту.

Вот как выглядит ответ ответ реле

Ответ №1:

Вы можете следовать примеру из официальных документов

 import React from 'react';
import { QueryRenderer, graphql } from 'react-relay';
 
const Example = (props) => {
  return (
    <QueryRenderer
      environment={environment}
      query={graphql`
        query ExampleQuery($pageID: ID!) {
          page(id: $pageID) {
            name
          }
        }
      `}
      variables={{
        pageID: '110798995619330',
      }}
      render={({ props }) => {
        if (props) {
          return <ChildComponent page={page.name} />;
        }
        return <div>Loading</div>;
      }}
    />
  );
}
  

вы можете использовать данные внутри рендеринга QueryRenderer, как обычные реквизиты