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.
K
kapa.ai87d 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: ----------------------
K
kapa.ai87d ago
<@66380739771379712> kapa.ai is still learning and improving, please let us know how it did by reacting below
A
ambitious-aqua86d 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
G
genetic-orange86d 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
No description
A
ambitious-aqua77d 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
A
ambitious-aqua73d 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.
More Posts
Custom PaginationHow to write custom pagination in DataGrid @kapa.aihow to use useOne in a function onChangeconst handlePinCodeChange = async (value) => { console.log(value); if (value.length >= For beginner, how to understand the beginning code?Hi guys, I am a beginner, I done a react online course already, but for the beginning of this courseHow to use custom method of Dataprovider with useSelect HookGive me a example for How to use custom method of Dataprovider with useSelect HookuseSelect not working , giving error G.mpa.data is not a functionconst { selectProps } = useSelect<ICategory>({ resource: "categories", }); My api response is How can one disable retry on failed queries ?I have a valid case of checking if entity is present, the api responds with 404 as it should and I nrefine resources authorizeUnauthorized users have restricted category listings. In _app.tsx, customergroups should not be expouseTable custom columnsHow can I add custom logic for the column display in useTable? For example, if I have `first_name` aApplication Error in refine/remix with supabasei cloned a refine/remix application using supabase as the dataProvider, after changing to my supabaEdit<Create isLoading={formLoading} saveButtonProps={{ size: "small", onClick: async (e) => { const formWhy does the useGetIdentity did not worki've tried printing it out and data and image is not undefined except for the user where i just use How can one support a new UI frameworkI would like to support blueprintjs in refine, is there a guide for this ?Major flashing before css appliesI'm making my first app with refine + remix + antdesign. My form flashes terribly (i.e., it is just Devtools looking on the wrong portIt seems that devtools is trying to connect on 5002 yet it launches on 5001. I can't find anywhere tDisabling cache in useShowHow can one always ensure that the resource is not cached ?custom auth pagecustom auth page @kapa.ai