Simple read-only static JSON data provider
I looked through the examples, but I'm not able to find any example which just consumes a read-only JSON URL. Is there a data provider available for this?
22 Replies
Hi @lordi3830. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
Hmm, I don't know enough to give you a confident answer yet. However, refine does provide a variety of data providers that can consume different types of APIs, including REST and GraphQL. You can use these data providers to communicate with your API and retrieve data.
For example, the
jsonServerDataProvider
and simple-rest
data provider can be used to communicate with a RESTful API. Here's an example of how you can use it:
In this example, the jsonServerDataProvider
is used to communicate with the API at <https://api.finefoods.refine.dev
.>
You can find more information about data providers in the refine documentation (https://refine.dev/docs/tutorial/understanding-dataprovider/index).
----------------------
Note: you can ask me a follow up question by @ mentioning me again
:speech_balloon:
----------------------<@888709588122222662> kapa.ai is still learning and improving, please let us know how it did by reacting below
other-emerald•14mo ago
I tried that @kapa.ai but it appends REST API parameters to the URL
Let me check the knowledge base for you. One moment! :books:
quickest-silver•14mo ago
Hi @lordi3830, I couldn't understand what do you mean by "read-only JSON-URL"
can you explain me more please ?
----------------------
Refine's data providers are designed to work with APIs that follow certain conventions. For instance, the
simple-rest
data provider expects the API to follow a certain URL structure and it appends REST API parameters to the URL. Here's the expected URL structure for each method:
| Method | URL | Query Parameters | Body |
| --- | --- | --- | --- |
| getList
| apiUrl
/ resource
| pagination
, sorters
, filters
| |
| getOne
| apiUrl
/ resource
/ id
| | |
| getMany
| apiUrl
/ resource
| id
| |
| create
| apiUrl
/ resource
| | variables
|
| update
| apiUrl
/ resource
/ id
| | variables
|
| deleteOne
| apiUrl
/ resource
/ id
| | data: variables
|
If your API doesn't follow this structure, you may need to customize the data provider. You can do this using the swizzle
command. Here's how you can do it:
1. Run the swizzle
command in the project directory:
2. Select @refinedev/simple-rest
from the list of available data providers.
3. Edit the /rest-data-provider/index.ts
file to customize the data provider.
4. Pass the customized data provider to the dataProvider
prop of the Refine
component.
You can find more information about customizing data providers in the refine documentation (https://refine.dev/docs/packages/documentation/data-providers/simple-rest).
----------------------
Note: you can ask me a follow up question by @ mentioning me again
:speech_balloon:
----------------------<@888709588122222662> kapa.ai is still learning and improving, please let us know how it did by reacting below
other-emerald•14mo ago
quickest-silver•14mo ago
since this is unique to the your application, you need to write your data provider. its really simple and straightforward to implement
quickest-silver•14mo ago
other-emerald•14mo ago
I'm a little bit amazed that this basic use case is not covered 🙂 Is it really so unique to be able to display JSON data?
quickest-silver•14mo ago
ofcourse most of the web already communication with JSON.
as you can see here, we are returning response body directly and getting total from header if has, otherwise we are returning data.length
https://github.com/refinedev/refine/blob/next/packages/simple-rest/src/provider.ts#L59
if you tell me why simple-rest is didn't work for you, I can try to explain more
https://example.com/data.json
if this returning plain JSON data, It should workother-emerald•14mo ago
ok thx let me check some more
Okay so I think I distilled it to this issue: Basically the JSON access works, but I want to do every pagination/sorting to happen client-side, not in the API call.
So I don't want another network request when the list sort is changed for example
Because the JSON list response does not change depending on the parameters
So I think I need to write a data provider that caches the response and performs the sorting/pagination in JS
But thats part of the reason why I choose refine so I DONT have to do that 🙂 I think this should be built in. But anyway, thanks for your response, much appreciated
quickest-silver•14mo ago
you can make
pagination.mode
and filters.mode
to "off"
and after that you need to handle this features on client side
https://refine.dev/docs/api-reference/antd/hooks/table/useTable/#filtersmode
but currently refine does not handle client side filtering, only handles client side pagination. since pagination and filters should work together. we need to set "off" both
we are not supporting because most of UI provider handles that pretty good
which UI provider are you using ?other-emerald•14mo ago
Currently in
table-matine-basic