stormy-gold•6mo ago

Can not get Strapi single content end point to load

I can't seem to get my single content end point to load. I have tried using useOne with the resource set to settings but it never loads properly. What it looks like is the resource includes the trailing / at the end so its api/resource/ and that wont work as it needs to just be api/resource. So I then tried not setting the resource and just setting an id as the resource and that generated the api request as api//resource Single content data from strapi is generated by making an api call to the uid and it auto sets the resource singular name as the uid for making api calls so in this instance the only way to populate the data is by making a call to api/resource and I am struggling to figure out how to do that.

6 Replies

kapa.ai•6mo ago

Hi @Erekyu. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Based on the information provided in the extracts, the useOne hook from Refine is used to fetch a single record from the API. It expects a resource and id property, which will be passed to the getOne method from the dataProvider as a parameter. Here is an example of how to use the useOne hook:

const { data } = useOne({  
 resource: "categories",  
 id: 1,  
});

const { data } = useOne({  
 resource: "categories",  
 id: 1,  
});

source (https://refine.dev/docs/tutorial/understanding-dataprovider/create-dataprovider#getone) If you're having trouble with the trailing / in the API endpoint, it might be related to how your dataProvider is set up. The dataProvider is responsible for handling all data-related operations such as fetching, caching, creating, updating, and deleting records. Here is an example of how a dataProvider might be set up:

const myDataProvider: DataProvider = {  
 getOne: async ({ resource, id }) => {  
 const response = await fetch(`<https://example.com/api/v1/${resource}/${id}`>);  
 const data = await response.json();  
  
 return { data };  
 },  
 // other methods...  
};

const myDataProvider: DataProvider = {  
 getOne: async ({ resource, id }) => {  
 const response = await fetch(`<https://example.com/api/v1/${resource}/${id}`>);  
 const data = await response.json();  
  
 return { data };  
 },  
 // other methods...  
};

source (https://refine.dev/docs/guides-concepts/general-concepts#data-provider) If you're still having trouble, it might be helpful to check the Refine documentation (https://refine.dev/docs) or the Refine GitHub issues (https://github.com/refinedev/refine/issues) to see if anyone else has encountered a similar problem. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•6mo ago

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

sunny-green•6mo ago

actually API URL's are generated without at the end trailing. you can see on this example https://example.admin.refine.dev/orders/show/1 if you provide reproducible example, we would happy to debug

Finefoods Ant Design Admin Panel - refine

Web site created using refine

stormy-gold•6mo ago

yes that is correct but strapi single content is generated without any id so lets say you have a single content type of blueTiger, to get all the data from blueTiger you have to make a call to /api/blueTiger but right now if you use useOne to get resource blueTiger it generated the api path as /blueTiger/ (looking for an id to follow the trailing /) If you set no resource and put the id as blueTiger it generated the path as //blueTiger. Neither of these work as signle type api does not load if you do not make the request to /blueTiger now if you create a dataprovider that does not add a trailing / after the resource it will load the data fine. so maybe if their is a way to remove the trailing / unless an ID is passed then that would fix the issue. Another way to test this also is to add meta data to populate so for example

Type IBlueTiger {
    id: string;
    name: string;
}

export const useBlueTiger = () => {
    const { data: blueTigers } = useOne<IBueTigers>({
      resource: "blueTiger",
      meta:{
        populate: "*",
      },
    })
    return blueTiger;
  };

Type IBlueTiger {
    id: string;
    name: string;
}

export const useBlueTiger = () => {
    const { data: blueTigers } = useOne<IBueTigers>({
      resource: "blueTiger",
      meta:{
        populate: "*",
      },
    })
    return blueTiger;
  };

if you did this the api request is sent to api/blueTiger/?metadata now if you do it this way:

Type IBlueTiger {
    id: string;
    name: string;
}

export const useBlueTiger = () => {
    const { data: blueTigers } = useOne<IBueTigers>({
      id: "blueTiger",
      meta:{
        populate: "*",
      },
    })
    return blueTiger;
  };

Type IBlueTiger {
    id: string;
    name: string;
}

export const useBlueTiger = () => {
    const { data: blueTigers } = useOne<IBueTigers>({
      id: "blueTiger",
      meta:{
        populate: "*",
      },
    })
    return blueTiger;
  };

Then the api request would be /api//blueTiger?metadata

sunny-green•6mo ago

@Erekyu Thanks for detailed explanation, we will add this issue to our backlog In mean time, if you want you can open github issue. maybe someone on community can open PR

eastern-cyan•6mo ago

Hello @Erekyu as @Alican Erdurmaz mentioned, feel free to create a GitHub issue. Also useCustom hook may be useful for your usecase. https://refine.dev/docs/data/hooks/use-custom/

useCustom | Refine

useCustom is used to send custom query requests using the Tanstack Query advantages. It is an extended version of TanStack Query's useQuery and not only supports all features of the mutation but also adds some extra features.