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?
kapa.ai
kapa.ai283d ago
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:
import jsonServerDataProvider from "@refinedev/simple-rest";

function App() {
const API_URL = "<https://api.finefoods.refine.dev";>
const dataProvider = jsonServerDataProvider(API_URL);

return (
<BrowserRouter>
...
<Refine
...
dataProvider={dataProvider}
>
...
</BrowserRouter>
);
}

export default App;
import jsonServerDataProvider from "@refinedev/simple-rest";

function App() {
const API_URL = "<https://api.finefoods.refine.dev";>
const dataProvider = jsonServerDataProvider(API_URL);

return (
<BrowserRouter>
...
<Refine
...
dataProvider={dataProvider}
>
...
</BrowserRouter>
);
}

export default App;
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: ----------------------
kapa.ai
kapa.ai283d ago
<@888709588122222662> kapa.ai is still learning and improving, please let us know how it did by reacting below
fair-rose
fair-rose283d ago
I tried that @kapa.ai but it appends REST API parameters to the URL
kapa.ai
kapa.ai283d ago
Let me check the knowledge base for you. One moment! :books:
xenial-black
xenial-black283d ago
Hi @lordi3830, I couldn't understand what do you mean by "read-only JSON-URL" can you explain me more please ?
kapa.ai
kapa.ai283d ago
---------------------- 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:
npm run refine swizzle
npm run refine swizzle
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.
import { Refine } from "@refinedev/core";
import { dataProvider } from "./rest-data-provider";

const App = () => {
return (
<Refine
dataProvider={dataProvider}
/* ... */
/>
);
};
import { Refine } from "@refinedev/core";
import { dataProvider } from "./rest-data-provider";

const App = () => {
return (
<Refine
dataProvider={dataProvider}
/* ... */
/>
);
};
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: ----------------------
kapa.ai
kapa.ai283d ago
<@888709588122222662> kapa.ai is still learning and improving, please let us know how it did by reacting below
fair-rose
fair-rose283d ago
just for example "https://example.com/data.json" which returns a JSON list.
xenial-black
xenial-black283d ago
since this is unique to the your application, you need to write your data provider. its really simple and straightforward to implement
fair-rose
fair-rose283d 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?
xenial-black
xenial-black283d 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 work
fair-rose
fair-rose283d 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
xenial-black
xenial-black283d 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
const {
tableProps: { pagination, ...tableProps },
} = useTable<IPost>({
pagination: {
mode: "off",
},
filters: {
mode: "off",
},
});
const {
tableProps: { pagination, ...tableProps },
} = useTable<IPost>({
pagination: {
mode: "off",
},
filters: {
mode: "off",
},
});
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 ?
fair-rose
fair-rose283d ago
Currently in table-matine-basic
xenial-black
xenial-black283d ago
we are using TanStack Table with mantine because, mantine's offical table is pretty basic
fair-rose
fair-rose283d ago
Ok with the mode: off changes it appears to get closer to what I want Is it available for sorting as well? Ok found it, sorters
xenial-black
xenial-black283d ago
I'm trying to create example
fair-rose
fair-rose283d ago
Wow awesome
xenial-black
xenial-black283d ago
wild-night-9qls2h
CodeSandbox brings instant cloud development environments that keep you in flow.
xenial-black
xenial-black283d ago
we talked yesterday. our pagination.mode:"client" works as expected but not work with filters. because still we don't have filters.mode ="client" but you want to handle pagination and filters together with this example I completly disabled refine pagination and filters feature. TanStack table pretty good at client side filtering and sorting I set mode off and replaced refine functions with TanStack Table Functions
const {
getHeaderGroups,
getRowModel,
setOptions,
setPageIndex,
getPageCount,
refineCore: {
tableQueryResult: { data: tableData },
},
...table
} = useTable({
columns,
manualPagination: false,
getPaginationRowModel: getPaginationRowModel(),
refineCoreProps: {
pagination: {
mode: "off",
},
filters: {
mode: "off",
},
},
});
const {
getHeaderGroups,
getRowModel,
setOptions,
setPageIndex,
getPageCount,
refineCore: {
tableQueryResult: { data: tableData },
},
...table
} = useTable({
columns,
manualPagination: false,
getPaginationRowModel: getPaginationRowModel(),
refineCoreProps: {
pagination: {
mode: "off",
},
filters: {
mode: "off",
},
},
});
and I give this functions and states to Pagination component
<Pagination
position="right"
total={getPageCount()}
page={table.getState().pagination.pageIndex + 1}
onChange={(number) => {
setPageIndex(number - 1);
}}
/>
<Pagination
position="right"
total={getPageCount()}
page={table.getState().pagination.pageIndex + 1}
onChange={(number) => {
setPageIndex(number - 1);
}}
/>
rest of code is same It seems most of functionalty works right now but from now you need to use TanStack table to improve this Table And we will talk again this confusion(boilerplate code or lack of feature) with our core team I hope in refine@5 we will seamlessly implement client side filter & pagination & sorting like server
fair-rose
fair-rose283d ago
Ok many thanks!
More Posts
unsaved changes warning in custom componentaside Mui components I have another plugins in my form so I need to show this warning if i leave chauseModalForm 3.x.x add a value before serverconst { modalProps: createModalProps, formProps: createFormProps, show: createModalShow,warn when unsaved changesin my create/edit forms Iam using useForm({ warnWhenUnsavedChanges: true, }); but it does not Realtime chat socket.ioHello everyone, this is a question, I am doing a chat on react socket-client, nodejs express mongoosCasbin's newEnforcer crash the appI'm trying to configure a RBAC using Casbin following the Doc. Creating the AccessControlProvider, No reflecting the change in title from index.html in refineNo treflecting the change in title from index.html in refinesocketHello, I have a question I am trying to integrate socket.io for live-provider. I have an order lisAdd fields in Edit view@kapa.ai , i want to add keyMembers field in this code and data format for keyMembers is like this, edit form submitI have a useEffect in my Autocomplete component useEffect(() => { if ( initialReturnValuAutocomplete initial renderI previously asked you a problem which was, I want to modify only the data refine fills when Edit paantd table without useTablehow do i set the view elements per page on an antd TableAutocomplete return idIam using a lot of Autocomplete component in the form I made a custom component for that and reusingcustom document header to remove "| refine"custom document header to remove "| refine"Edit page initial loadwhen an edit page loads, it fetches and fills the fields the data from response by looking the name edit page submitIn Edit page, when I submit the data, the value of every field in the form is passing but I only wanRefine React NativeHi guys hope you have a wonderful day, Just want to ask when will be the release of stable version fcan we reset field on click of reset button for searchFormPropscan we reset field on click of reset button for searchFormProps onSearch: (params) => { debuLoad multiple data grids based on the row values@kapa.ai , in my list component, i am rendering a datagrid, in which there is a field named isNew, nuseSelect - Populate Input Based on Dropdown SelectionHi! I have the dropdown -- ```const { selectProps: selectProductProps } = useSelect({ resoauthProvider's onError doesn't run when getting 403 and 401 responsesI'm trying to logout the user when getting a 403 or 401 response, but onError function doesn't run n