I have a page where you can see the current Item and click "Next" to see the next one. Here is how this component looks like:
class App extends Component {
constructor(props) {
super(props);
this.state = {
index: 0,
ids: ["VXNlcjox", "VXNlcjoy"]
};
this.onNext = () => this.setState(s => ({ index: (s.index + 1) % 2 }));
}
render() {
const { index, ids } = this.state;
return (
<div>
<button type="button" onClick={this.onNext}>
next
</button>
<QueryRenderer
environment={environment}
query={graphql`
query App_Query($id: ID!) {
node(id: $id) {
id
}
}
`}
variables={{ id: ids[index] }}
render={({ error, props }) => {
if (error) {
return <div>Error!</div>;
}
if (!props) {
return <div>Loading...</div>;
}
return <pre>{JSON.stringify(props, null, 2)}</pre>;
}}
/>
</div>
);
}
}
What I expect, is that each Item will be fetched only when requested for the first time and later used from cache.
But what I see, is that the new request made in the network tab every time I click "next", even if this Item was requested before. If I open Relay DevTools - Items with this id is already in the store:
So why is the new request made every time? Isn't Relay Modern supposed to reuse previously cached data?
I don't think it's the way query renderer is meant to work by default.
You're probably looking for this relay-query-lookup-renderer