score:4
what i understand from that spec is that relay can only paginate with single direction, forwards or backwards.
correct. the original design was exactly that, an infinite scroll pagination. it was never intended to be used for bi-directional pagination.
but how about sequential pages like stackoverflow questions page?
this is quite tricky do to with the default implementation of relay as it stands today because, as stated above, it was't designed for bi-directional navigation.
that said, you can still achieve this, though not through optimal means.
method 1 - passing page info through relay
this is probably the easiest method to implement, though the less optimal one. it involves passing the page info to relay as a graphql argument. this requires a new relay query each time you navigate to a new page.
example
assume you have a view displaying a list of members. you fetch a list of member
nodes with memberlist
. if you only want to display 10 members per "page" and we're on page 3, you could do:
app: () => relay.ql`
fragment on app {
memberlist(page: 3, limit: 10) {
...
}
}`
}
in your backend your sql query would now look something like:
select id, username, email from members limit 20, 10;
where 20
is the starting record: (page-1)*10
and 10
is the limit (how many items after the start). so the above will fetch the records 21-30.
note that you would need initial values for page
and limit
. so your final query would be:
preparevariables() {
return {
page: 1,
limit: 10,
};
},
fragments: {
app: () => relay.ql`
fragment on app {
memberlist(page: $page, limit: $limit) {
...
}
}`
}
}
and when navigating to a new page we need to update the values:
_gotopage = (pg) => {
this.props.relay.setvariables({
page: pg,
});
}
method 2 - manually managing cursors
this is a slightly hacky implementation in that it essentially gives you a bi-directional navigation, even though is not natively supported. this approach is slightly more optimal to the first one, but sacrifices the ability to jump to a page directly.
note that we cannot use both first
and last
:
including a value for both first and last is strongly discouraged, as it is likely to lead to confusing queries and results.
hence we would construct our query normally. something like:
app: () => relay.ql`
fragment on app {
memberlist(first: 10, after: $cursor) {
...
}
}`
}
where the initial value for $cursor
is null
.
as you navigate to the next page and set the value for $cursor
to be the cursor of the last member node, you also save the value in a local stack variable.
this way, whenever you navigate back you would simply pop the last cursor from the stack and use that for your after
argument. it requires some extra logic in your application, but this is definitely doable.
score:1
based on method 2 given by @chris,
this is my solution in vuejs, it's roughly the same for reactjs as well.
loadpage(type) {
const { endcursor } = this.pageinfo
let cursor = null
if(type === 'previous') {
this.cursorstack = this.cursorstack.slice(0, this.cursorstack.length - 1)
cursor = this.cursorstack[this.cursorstack.length - 1]
}
else {
cursor = endcursor
this.cursorstack = [...this.cursorstack, cursor]
}
this.fetchmore({
variables: { cursor: cursor },
updatequery: (previousresult, { fetchmoreresult }) => {
if (!fetchmoreresult) return previousresult
return fetchmoreresult
}
})
},
in template:
<button :disabled="!cursorstack.length" @click="loadpage('previous')" />
<button :disabled="!pageinfo.hasnextpage" @click="loadpage('next')" />
Source: stackoverflow.com
Related Query
- Forward and backward pagination with relay js
- React: make a cycle-through component with both forward and backward directions using Generator
- Relay vs Redux vs Apollo with GraphQL and React-Native
- React table dynamic page size but with size limit and pagination
- Gatsby.js: Navigating with URL Parameters and the Browser Back / Forward Buttons
- react-query - getQueryData and setQueryData with pagination
- Query with Relay and GraphQL
- Pagination and Card Components with Ant Design (antd)?
- Pagination with json-server and React.js
- How to implement a server side pagination with Material ui and react?
- Pagination with Gatsby and Templates
- React Redux with Router Location, Pagination / Sorting and Fetch
- React table with sorting and pagination doesn't update
- How to animate change of colour (keyframes) forward and back on click with useState without starting animation during first loading of page?
- How to do testing with Relay modern with jest and enzyme?
- Firebase pagination with Mui-Datatable pagination and sorting
- Problem with useState in ReactJS and pagination
- redux state in componentWillRecieveProps issue with forward and back button
- What is the proper way to implement chat "history" like pagination with relay connections?
- There's a bug with Search and Pagination in React
- Handling redux state with filtering, sorting and pagination done in backend
- How can I have pagination and receive new messages simultaneously with Firebase?
- moving forward and backward between each month
- how to do bind data with material-ui table and also pagination
- Problem with a fetch search and pagination with React
- How do I forward authorization with the user JWT token in the header and compare it to the JWT token in the cookie to Auth user?
- React component with Pagination and search issue
- Filter Blog data containing Multiple Tags with View Limit and Pagination in ReactJs
- clear state and update with newdata while navigating to next page with pagination in React JS
- Issue with the pagination and redirecting to the top of the new page
More Query from same tag
- how to toggle all checkbox by clicking header checkbox react js
- Removing a header name in react table and making it empty
- Using history mixin in ES6?
- How to map multiple charts with chart.js in react
- Mui V5 Snackbar custom position
- Why is React.FunctionComponenent preferred over conventional function definitions?
- React/TypeScript: Specifically type props.children to component
- How to override default location of snackbar notification DropZoneArea
- Any idea why Typescript behaves this way with Material UI Alert severity prop?
- React final form not working with typescript
- What's the actual cost of defining new function within react render method?
- react router show root component as well as routed path
- next.js image is missing src property
- React: change from class based components to functional based components
- Unknown Prop Warning when React.cloneElement used
- How to Set Leaflet Map's Zoom to Show All Markers in React Leaflet?
- What is the right approach for state change?
- Unit testing with enzyme got Cannot read property 'be' of undefined
- [material-ui],[redux-from] Select with dynamic options
- How to handle radio Buttons with react.js
- Getting TypeError: Object(...) is not a function with when changing Routes in React
- How to add Style on click in React
- react js Cannot read property 'id' of undefined
- Cannot read property 'image_url' of undefined in React
- React Navigation 3.x Require cycle warning
- How to get the index of the barchart label that has been clicked with react-chart js-2?
- I am trying to get the value of the property in my dropdown menu in react
- How to avoid DRY code with React Components
- How to have 3 columns layout with left and right column sticky to the bottom?
- Use NTLM authentication with Axios