Comments (3)
I'm also trying to get gridjs to work with graphql
is it possible to get the data option available inside pagination so we can use a custom HTTP client for paging, sorting, searching etc?
ex) https://gridjs.io/docs/examples/custom-http-client
I'm looking for ways to get this to work with apollo client and graphql
from gridjs.
This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.
from gridjs.
Here's a working graphql config for anyone stuck with this. Caveat: you need to set up a graphql endpoint/query that receives first: Int!, offset: Int!, keyword: Int!
for this to work, i.e. an endpoint that returns a paginated list of results that is filterable if a search term is provided. Using separate endpoints for search and pagination makes the problem 10x harder to solve.
<Grid
{columns}
{className}
sort
search={{
enabled: true,
server: {
body: (prevBody, keyword) => {
return {
keyword: keyword
}
}
}
}}
pagination={{
enabled: true,
limit: 5,
summary: true,
server: {
body: (prevBody, page, limit) => {
return {
...prevBody,
first: limit,
offset: page * limit
}
}
}
}}
server={{
data: (opts) => {
return new Promise((resolve, reject) => {
let variables = {
keyword: "",
first: 10,
offset: 0,
...opts.body
}
graphQLClient.request(paginatedFilterableSearch, variables)
.then((res) => {
resolve({
data: res.data.map(item => {
return [item.name, transcript.description, transcript.slug]
}),
total: res.data.total_count
})
})
.catch((error) => {
reject(error)
})
})
}
}}
/>
For reference, I'm using this with https://github.com/lynxtaa/awesome-graphql-client
from gridjs.
Related Issues (20)
- 横向的虚拟滚动也加一下吧,大哥! HOT 1
- Export Buttons HOT 2
- Types are missing in fresh Typescript project. HOT 1
- How to use BaseComponent in version 6 HOT 1
- Global events not triggering in UMD version HOT 2
- Events are nor Triggered HOT 1
- Do not push others to use PREACT or NODEJS HOT 1
- Search when page is anything other page 1 doesn't display correctly. HOT 4
- Load data in JSON format using Ajax JQuery with all features Sorting, Paginations HOT 1
- How to obtain pagination click events? HOT 1
- Add column option for text justification so different columns can align differently? HOT 1
- Tooltip when hover over header HOT 1
- Plugin folder fails to build when building from git. HOT 1
- Request to mark this Library Unmaintained if it is not being updated anymore HOT 3
- Pagination's selected num forced change to `1` with sort HOT 1
- Table background opacity HOT 1
- Compatibility issue? HOT 1
- Being able to resize a column below it's minimum width HOT 1
- IDs are not unique - Violation of SIA-R3 HOT 1
- wide table option error HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from gridjs.