Hi I have a problem running $useResource with a relative url and fetch.
I have this function:
export async function getResourceRequest(data: {
search: string;
limit: number;
page: number
}): Promise<{ count: number, data: ResourceDto[] }> {
const response = await fetch("/api/internal/resource?page=" + data.page + "&limit=" + data.limit + "&search=" + data.search, {
});
if (!response.ok) {
throw new Error('Network response was not ok');
}
return await response.json();
And I want to use useResource$ with this simple component.
export default component$(() => {
const filter = useStore({
search: '',
limit: 10,
page: 0
})
const resources = useResource$<{ count: number, data: ResourceDto[] }>(({ track, cleanup }) => {
track(() => filter);
const controller = new AbortController();
cleanup(() => controller.abort())
return getResourceRequest(filter);
});
return <>
<Resource
value={resources}
onPending={() => <>Loading...</>}
onRejected={(error) => <>{error.message}</>}
onResolved={(resourcesDtos) => (
<>
<ul>
{resourcesDtos.data.map((i: ResourceDto, n) => (<li key={n}>{i.title}</li>))}
</ul>
</>)
}></Resource>
</>
});
But when I run it I get "Failed to parse URL from /api/internal/resource?page=0&limit=10&search="
Any tips on how to deal with it?