genetic-orange
genetic-orange15mo ago

No records/data found for resource "character"

Hi everyone, I am new in refine. For learning I am following tutorial. I am trying little differences to learn better. We know https://rickandmortyapi.com. I wanna use this api and list characters on /character. I can see this page with http://localhost:3000/character/show/1 as u can see. But http://localhost:3000/character/ doesn't work. My App.tsx in here: https://pastecode.io/s/0vufy49h
The Rick and Morty API
The Rick and Morty API
The Rick and Morty API is a REST and GraphQL API based on the television show Rick and Morty
No description
No description
7 Replies
kapa.ai
kapa.ai15mo ago
Hey @suhacan! I'm the kapa.ai support bot. I've searched through the docs to try to answer your question. :wave:
kapa.ai
kapa.ai15mo ago
---------------------- It looks like you are trying to list all the characters from the Rick and Morty API. To do this, you need to add the /characters endpoint from the API as a resource in your App.tsx file. You can add the highlighted code to your App.tsx to connect to the endpoint and List page. App.tsx
import { Refine } from "@pankod/refine-core";
import dataProvider from "@pankod/refine-json-server";

import { CharacterList } from "pages/characters";

const API_URL = "https://rickandmortyapi.com/api";

const App: React.FC = () => {
return (
<Refine
dataProvider={dataProvider(API_URL)}
resources={[
{
name: "characters",
list: CharacterList,
},
]}
/>
);
};

export default App;
import { Refine } from "@pankod/refine-core";
import dataProvider from "@pankod/refine-json-server";

import { CharacterList } from "pages/characters";

const API_URL = "https://rickandmortyapi.com/api";

const App: React.FC = () => {
return (
<Refine
dataProvider={dataProvider(API_URL)}
resources={[
{
name: "characters",
list: CharacterList,
},
]}
/>
);
};

export default App;
You can also check the data coming from the data provider. Open your browser and navigate to https://rickandmortyapi.com/api/character. You will be presented with all the available characters. Make sure to install JSON formatter (https://chrome.google.com/webstore/detail/json-formatter/bcjindcccaagfpapjjmafapmmgkkhgoa?hl=en) so the returned data is formatted and easy to read. For more information, please refer to the refine documentation (https://refine.dev/docs/api-reference/core/components/refine-config). ----------------------
JSON Formatter
Makes JSON easy to read. Open source.
kapa.ai
kapa.ai15mo ago
<@375325808706846721> kapa.ai is still learning and improving, please let us how it did by reacting below
genetic-orange
genetic-orange15mo ago
sorry but doesn't work @contributor
dependent-tan
dependent-tan15mo ago
Hi, your need to customize your data provider according to your needs this is a example code to work inferencer with rick and morty api
<Refine
dataProvider={{
...dataProvider(API_URL),
getList: async ({ resource, pagination, filters, sorters }) => {
const res = await fetch(`${API_URL}/${resource}`)
const data = await res.json()

return {
data: data.results,
total: data.info.count,
}
},
}}
<Refine
dataProvider={{
...dataProvider(API_URL),
getList: async ({ resource, pagination, filters, sorters }) => {
const res = await fetch(`${API_URL}/${resource}`)
const data = await res.json()

return {
data: data.results,
total: data.info.count,
}
},
}}
I suggest you too follow this tutorial: https://refine.dev/docs/tutorial/understanding-dataprovider/index/
No description
genetic-orange
genetic-orange15mo ago
After working with the data provider a little more, I understood its logic. Thanks for your help. 🙂
dependent-tan
dependent-tan15mo ago
I'm glad to hear that 🙏