Refetch Graphql data
I have the Base Component which will have a QueryRenderer to fetch data for header, food items list, filtering options. In the render method, i would like to display the Header, FoodList and a FilterSidebar . Now when on click of a item in FilterSidebar, i am changing the state in redux , which in turn is used as variables for the QueryRender. The QueryRender refetches the data again with the new filters. The problem is since Header and Filtersidebar is also inside renderer method of queryrender, All the components get refreshed. Is there any way to handle this situation where only the listing changes based on new variables.
reactjs react-redux graphql graphql-js relayjs
asked Nov 19 '18 at 9:57
Ankit GuptaAnkit Gupta
114
add a comment |
I have the Base Component which will have a QueryRenderer to fetch data for header, food items list, filtering options. In the render method, i would like to display the Header, FoodList and a FilterSidebar . Now when on click of a item in FilterSidebar, i am changing the state in redux , which in turn is used as variables for the QueryRender. The QueryRender refetches the data again with the new filters. The problem is since Header and Filtersidebar is also inside renderer method of queryrender, All the components get refreshed. Is there any way to handle this situation where only the listing changes based on new variables.
reactjs react-redux graphql graphql-js relayjs
asked Nov 19 '18 at 9:57
Ankit GuptaAnkit Gupta
114
Maybe implement shouldComponentUpdate for the components in question? With redux you would usually build smaller components and connect them to the store so that you don't have to do that.
– Herku
Nov 19 '18 at 13:03
Also is this really a problem? The only impact should be performance, otherwise you are doing something wrong. Make sure you are optimising a bottleneck before you are optimizing at all. The level of your question does not indicate, that you are at the stage where you should be optimizing React renders.
– Herku
Nov 19 '18 at 13:05
the mail goal is to have root QueryRenderer[limiting graphql api call to single request] and it will provide data to child fragment container. However, child component can change the filter option hence the query variables needs to be changed. Changing the query variables re renders all the component
– Ankit Gupta
Nov 20 '18 at 7:14
add a comment |
I have the Base Component which will have a QueryRenderer to fetch data for header, food items list, filtering options. In the render method, i would like to display the Header, FoodList and a FilterSidebar . Now when on click of a item in FilterSidebar, i am changing the state in redux , which in turn is used as variables for the QueryRender. The QueryRender refetches the data again with the new filters. The problem is since Header and Filtersidebar is also inside renderer method of queryrender, All the components get refreshed. Is there any way to handle this situation where only the listing changes based on new variables.
reactjs react-redux graphql graphql-js relayjs
asked Nov 19 '18 at 9:57
Ankit GuptaAnkit Gupta
114
I have the Base Component which will have a QueryRenderer to fetch data for header, food items list, filtering options. In the render method, i would like to display the Header, FoodList and a FilterSidebar . Now when on click of a item in FilterSidebar, i am changing the state in redux , which in turn is used as variables for the QueryRender. The QueryRender refetches the data again with the new filters. The problem is since Header and Filtersidebar is also inside renderer method of queryrender, All the components get refreshed. Is there any way to handle this situation where only the listing changes based on new variables.
reactjs react-redux graphql graphql-js relayjs
reactjs react-redux graphql graphql-js relayjs
asked Nov 19 '18 at 9:57
Ankit GuptaAnkit Gupta
114
asked Nov 19 '18 at 9:57
Ankit GuptaAnkit Gupta
114
edited Nov 20 '18 at 11:41
Ankit Gupta
asked Nov 19 '18 at 9:57
Ankit GuptaAnkit Gupta
114
asked Nov 19 '18 at 9:57
Ankit GuptaAnkit Gupta
114
asked Nov 19 '18 at 9:57
Ankit GuptaAnkit Gupta
114
114
Maybe implement shouldComponentUpdate for the components in question? With redux you would usually build smaller components and connect them to the store so that you don't have to do that.
– Herku
Nov 19 '18 at 13:03
Also is this really a problem? The only impact should be performance, otherwise you are doing something wrong. Make sure you are optimising a bottleneck before you are optimizing at all. The level of your question does not indicate, that you are at the stage where you should be optimizing React renders.
– Herku
Nov 19 '18 at 13:05
the mail goal is to have root QueryRenderer[limiting graphql api call to single request] and it will provide data to child fragment container. However, child component can change the filter option hence the query variables needs to be changed. Changing the query variables re renders all the component
– Ankit Gupta
Nov 20 '18 at 7:14
add a comment |
Maybe implement shouldComponentUpdate for the components in question? With redux you would usually build smaller components and connect them to the store so that you don't have to do that.
– Herku
Nov 19 '18 at 13:03
Also is this really a problem? The only impact should be performance, otherwise you are doing something wrong. Make sure you are optimising a bottleneck before you are optimizing at all. The level of your question does not indicate, that you are at the stage where you should be optimizing React renders.
– Herku
Nov 19 '18 at 13:05
the mail goal is to have root QueryRenderer[limiting graphql api call to single request] and it will provide data to child fragment container. However, child component can change the filter option hence the query variables needs to be changed. Changing the query variables re renders all the component
– Ankit Gupta
Nov 20 '18 at 7:14
Maybe implement shouldComponentUpdate for the components in question? With redux you would usually build smaller components and connect them to the store so that you don't have to do that.
– Herku
Nov 19 '18 at 13:03
Maybe implement shouldComponentUpdate for the components in question? With redux you would usually build smaller components and connect them to the store so that you don't have to do that.
– Herku
Nov 19 '18 at 13:03
Also is this really a problem? The only impact should be performance, otherwise you are doing something wrong. Make sure you are optimising a bottleneck before you are optimizing at all. The level of your question does not indicate, that you are at the stage where you should be optimizing React renders.
– Herku
Nov 19 '18 at 13:05
Also is this really a problem? The only impact should be performance, otherwise you are doing something wrong. Make sure you are optimising a bottleneck before you are optimizing at all. The level of your question does not indicate, that you are at the stage where you should be optimizing React renders.
– Herku
Nov 19 '18 at 13:05
the mail goal is to have root QueryRenderer[limiting graphql api call to single request] and it will provide data to child fragment container. However, child component can change the filter option hence the query variables needs to be changed. Changing the query variables re renders all the component
– Ankit Gupta
Nov 20 '18 at 7:14
the mail goal is to have root QueryRenderer[limiting graphql api call to single request] and it will provide data to child fragment container. However, child component can change the filter option hence the query variables needs to be changed. Changing the query variables re renders all the component
– Ankit Gupta
Nov 20 '18 at 7:14
add a comment |
0
active
oldest
votes
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53372134%2frefetch-graphql-data%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
0
active
oldest
votes
0
active
oldest
votes
active
oldest
votes
active
oldest
votes
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53372134%2frefetch-graphql-data%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Maybe implement shouldComponentUpdate for the components in question? With redux you would usually build smaller components and connect them to the store so that you don't have to do that.
– Herku
Nov 19 '18 at 13:03
Also is this really a problem? The only impact should be performance, otherwise you are doing something wrong. Make sure you are optimising a bottleneck before you are optimizing at all. The level of your question does not indicate, that you are at the stage where you should be optimizing React renders.
– Herku
Nov 19 '18 at 13:05
the mail goal is to have root QueryRenderer[limiting graphql api call to single request] and it will provide data to child fragment container. However, child component can change the filter option hence the query variables needs to be changed. Changing the query variables re renders all the component
– Ankit Gupta
Nov 20 '18 at 7:14