xenial-black•2y 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 is a REST and GraphQL API based on the television show Rick and Morty

7 Replies

kapa.ai•2y 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•2y 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•2y ago

<@375325808706846721> kapa.ai is still learning and improving, please let us how it did by reacting below

xenial-black•2y ago

sorry but doesn't work @contributor

conscious-sapphire•2y 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/

xenial-black•2y ago

After working with the data provider a little more, I understood its logic. Thanks for your help. 🙂

conscious-sapphire•2y ago

I'm glad to hear that 🙏