I am new to relay, I have a query that delivers a response, which I can see in the network tab of the inspector, but what I dont understand is how to grab that response for use in my component. Could someone please explain that?
My query is
const query = graphql`
query AdvisorProfileQuery($id: ID!) {
node(id: $id) {
...on Advisor {
name
postalCode
products
referralCode
status
updatedAt
}
}
}`;
and runs through the renderer
const QueryRenderer = LoadingQueryRenderer(AdvisorProfile, query);
export default ({ i18n }) => {
return (
<>
<QueryRenderer
params={{ id: id }}
/>
</>
);
};
but what is the variable name that holds that data that is returned to the component? I want to pass that data as a prop to another component.
You can follow the example from official docs
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>;
}}
/>
);
}
you can consume the data inside the QueryRenderer render like usual props