SolidJS•6mo ago

How do i fetch data correctly in a route?

Hi, I am currently trying to fetch a .json, which I just need to import an array, that I then assign to a signal. But I can't seem to get the path right (do I need API / Proxy?), and before that I had the problem of top level await not being allowed in my build target ES2019. At first I used async functions outside of my exported component, and now currently I am trying to fetch the data with createResource. my current createResource approach

// quotes.json located at src/assets/quotes/quotes.json called in src/routes/quotes.tsx
const [quotes] = createResource(async () => {
        const response = await fetch("../assets/quotes/quotes.json");
        return (await response.json()) as Quotes;
});

// quotes.json located at src/assets/quotes/quotes.json called in src/routes/quotes.tsx
const [quotes] = createResource(async () => {
        const response = await fetch("../assets/quotes/quotes.json");
        return (await response.json()) as Quotes;
});

my previous attempt with top level await error

const fetch_quotes = async () => {
    "use server";
    const response = await fetch('/src/data/quotes/quotes.json');
    const data = await response.json();
    return data;
};

const fetch_quotes = async () => {
    "use server";
    const response = await fetch('/src/data/quotes/quotes.json');
    const data = await response.json();
    return data;
};

2 Replies

bigmistqke•6mo ago

I'm assuming the path you are adding is relative to the module's path. But that's only gonna work with import statements, not fetch. https://docs.solidjs.com/solid-start/building-your-application/static-assets

peerreynders•6mo ago

For reference https://stackblitz.com/edit/stackblitz-starters-7datdm?file=src%2Froutes%2Fquotes.tsx

peerreynders

StackBlitz

Quick fetch example - StackBlitz

A Solid TypeScript project based on @solidjs/meta, @solidjs/router, solid-js, typescript, vite and vite-plugin-solid

Gaming

Programming

How do i fetch data correctly in a route?