How to do advanced pagination
I'm trying to create pagination logic for my Table component, I'm using antd.
I have a few requirements which are making it quite difficult to implement:
- I would like to be able to sort by different columns
- Have some kind of cache implemented, currently using the apollo-client
- Be able to jump around within the table (Example: should be no problem of going from pages 1 to 500 and then 3)
I have an endpoint that accepts the input object:
{
offset: Int,
limit: Int, # How many records to return starting from the offset defined
...
# Some sorting rules
}
Currently all Table implementation I've found are using some kind of dataSource which always is an array, which is great for a static lists or the endless scrolling effect.
This should have been implemented often before by others, so I would love to hear how others have solved this simple issue?
If you think I should just drop the caching support, how would you even do that when most Table components accept an array?
reactjs caching graphql apollo-client
asked Nov 27 '18 at 17:44
JeggyJeggy
262521
add a comment |
I'm trying to create pagination logic for my Table component, I'm using antd.
I have a few requirements which are making it quite difficult to implement:
- I would like to be able to sort by different columns
- Have some kind of cache implemented, currently using the apollo-client
- Be able to jump around within the table (Example: should be no problem of going from pages 1 to 500 and then 3)
I have an endpoint that accepts the input object:
{
offset: Int,
limit: Int, # How many records to return starting from the offset defined
...
# Some sorting rules
}
Currently all Table implementation I've found are using some kind of dataSource which always is an array, which is great for a static lists or the endless scrolling effect.
This should have been implemented often before by others, so I would love to hear how others have solved this simple issue?
If you think I should just drop the caching support, how would you even do that when most Table components accept an array?
reactjs caching graphql apollo-client
asked Nov 27 '18 at 17:44
JeggyJeggy
262521
Im not sure I understand the issue.. Why array is a problem? Array is one of core concepts in GraphQL and Apollo client knows how to deal with them.
– Solo
Nov 27 '18 at 18:04
apollographql.com/docs/react/features/pagination.html
– Solo
Nov 27 '18 at 18:04
The problem is when using fetchMore I will append the result. So if I go directly to page 3 instead of 2. I will have an datasource array with pageSize * 2. so page 3 will seem empty.
– Jeggy
Nov 27 '18 at 18:20
@Jeggy what did you end up doing?
– A.com
Jan 23 at 23:31
Didn't come up with a better solution. So I'm just fetching the current data based on which page the user is on, so if the user goes from page 5 then 100 then back to 5. It will fetch the items on page 5 twice.
– Jeggy
Jan 24 at 8:59
add a comment |
I'm trying to create pagination logic for my Table component, I'm using antd.
I have a few requirements which are making it quite difficult to implement:
- I would like to be able to sort by different columns
- Have some kind of cache implemented, currently using the apollo-client
- Be able to jump around within the table (Example: should be no problem of going from pages 1 to 500 and then 3)
I have an endpoint that accepts the input object:
{
offset: Int,
limit: Int, # How many records to return starting from the offset defined
...
# Some sorting rules
}
Currently all Table implementation I've found are using some kind of dataSource which always is an array, which is great for a static lists or the endless scrolling effect.
This should have been implemented often before by others, so I would love to hear how others have solved this simple issue?
If you think I should just drop the caching support, how would you even do that when most Table components accept an array?
reactjs caching graphql apollo-client
asked Nov 27 '18 at 17:44
JeggyJeggy
262521
I'm trying to create pagination logic for my Table component, I'm using antd.
I have a few requirements which are making it quite difficult to implement:
- I would like to be able to sort by different columns
- Have some kind of cache implemented, currently using the apollo-client
- Be able to jump around within the table (Example: should be no problem of going from pages 1 to 500 and then 3)
I have an endpoint that accepts the input object:
{
offset: Int,
limit: Int, # How many records to return starting from the offset defined
...
# Some sorting rules
}
Currently all Table implementation I've found are using some kind of dataSource which always is an array, which is great for a static lists or the endless scrolling effect.
This should have been implemented often before by others, so I would love to hear how others have solved this simple issue?
If you think I should just drop the caching support, how would you even do that when most Table components accept an array?
reactjs caching graphql apollo-client
reactjs caching graphql apollo-client
asked Nov 27 '18 at 17:44
JeggyJeggy
262521
asked Nov 27 '18 at 17:44
JeggyJeggy
262521
asked Nov 27 '18 at 17:44
JeggyJeggy
262521
asked Nov 27 '18 at 17:44
JeggyJeggy
262521
asked Nov 27 '18 at 17:44
JeggyJeggy
262521
262521
Im not sure I understand the issue.. Why array is a problem? Array is one of core concepts in GraphQL and Apollo client knows how to deal with them.
– Solo
Nov 27 '18 at 18:04
apollographql.com/docs/react/features/pagination.html
– Solo
Nov 27 '18 at 18:04
The problem is when using fetchMore I will append the result. So if I go directly to page 3 instead of 2. I will have an datasource array with pageSize * 2. so page 3 will seem empty.
– Jeggy
Nov 27 '18 at 18:20
@Jeggy what did you end up doing?
– A.com
Jan 23 at 23:31
Didn't come up with a better solution. So I'm just fetching the current data based on which page the user is on, so if the user goes from page 5 then 100 then back to 5. It will fetch the items on page 5 twice.
– Jeggy
Jan 24 at 8:59
add a comment |
Im not sure I understand the issue.. Why array is a problem? Array is one of core concepts in GraphQL and Apollo client knows how to deal with them.
– Solo
Nov 27 '18 at 18:04
apollographql.com/docs/react/features/pagination.html
– Solo
Nov 27 '18 at 18:04
The problem is when using fetchMore I will append the result. So if I go directly to page 3 instead of 2. I will have an datasource array with pageSize * 2. so page 3 will seem empty.
– Jeggy
Nov 27 '18 at 18:20
@Jeggy what did you end up doing?
– A.com
Jan 23 at 23:31
Didn't come up with a better solution. So I'm just fetching the current data based on which page the user is on, so if the user goes from page 5 then 100 then back to 5. It will fetch the items on page 5 twice.
– Jeggy
Jan 24 at 8:59
Im not sure I understand the issue.. Why array is a problem? Array is one of core concepts in GraphQL and Apollo client knows how to deal with them.
– Solo
Nov 27 '18 at 18:04
Im not sure I understand the issue.. Why array is a problem? Array is one of core concepts in GraphQL and Apollo client knows how to deal with them.
– Solo
Nov 27 '18 at 18:04
apollographql.com/docs/react/features/pagination.html
– Solo
Nov 27 '18 at 18:04
apollographql.com/docs/react/features/pagination.html
– Solo
Nov 27 '18 at 18:04
The problem is when using fetchMore I will append the result. So if I go directly to page 3 instead of 2. I will have an datasource array with pageSize * 2. so page 3 will seem empty.
– Jeggy
Nov 27 '18 at 18:20
The problem is when using fetchMore I will append the result. So if I go directly to page 3 instead of 2. I will have an datasource array with pageSize * 2. so page 3 will seem empty.
– Jeggy
Nov 27 '18 at 18:20
@Jeggy what did you end up doing?
– A.com
Jan 23 at 23:31
@Jeggy what did you end up doing?
– A.com
Jan 23 at 23:31
Didn't come up with a better solution. So I'm just fetching the current data based on which page the user is on, so if the user goes from page 5 then 100 then back to 5. It will fetch the items on page 5 twice.
– Jeggy
Jan 24 at 8:59
Didn't come up with a better solution. So I'm just fetching the current data based on which page the user is on, so if the user goes from page 5 then 100 then back to 5. It will fetch the items on page 5 twice.
– Jeggy
Jan 24 at 8:59
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%2f53505302%2fhow-to-do-advanced-pagination%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%2f53505302%2fhow-to-do-advanced-pagination%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
Im not sure I understand the issue.. Why array is a problem? Array is one of core concepts in GraphQL and Apollo client knows how to deal with them.
– Solo
Nov 27 '18 at 18:04
apollographql.com/docs/react/features/pagination.html
– Solo
Nov 27 '18 at 18:04
The problem is when using fetchMore I will append the result. So if I go directly to page 3 instead of 2. I will have an datasource array with pageSize * 2. so page 3 will seem empty.
– Jeggy
Nov 27 '18 at 18:20
@Jeggy what did you end up doing?
– A.com
Jan 23 at 23:31
Didn't come up with a better solution. So I'm just fetching the current data based on which page the user is on, so if the user goes from page 5 then 100 then back to 5. It will fetch the items on page 5 twice.
– Jeggy
Jan 24 at 8:59