SolidJS•7mo ago

Problem with createAsync.

When my client side try to get data from my server side with createAsync it just will always return a undefined values even when I change the getter to return a string without passing by other function or storage. It is build on the template with-auth of solidStart in typescripts. Here the function on the server side :

export const getProjects = cache(async () => {
    'use server';
    try {
        await userCheck();
        return { colDef: [], data: []};
    } catch (err) {
        throw new Error('Erreur lors de la récupération des projets');
    }
}, 'projects');

export const getProjects = cache(async () => {
    'use server';
    try {
        await userCheck();
        return { colDef: [], data: []};
    } catch (err) {
        throw new Error('Erreur lors de la récupération des projets');
    }
}, 'projects');

On the client side :

export const route = {
    load: () => getProjects(),
} satisfies RouteDefinition;

const listProject: Component = () => {
    const dataList = createAsync(() => getProjects(), {deferStream: true});
}

export const route = {
    load: () => getProjects(),
} satisfies RouteDefinition;

const listProject: Component = () => {
    const dataList = createAsync(() => getProjects(), {deferStream: true});
}

9 Replies

brenelz•7mo ago

It will only run once in this case. You need to wrap in createEffect for it to run when it changes

ClaloiOP•7mo ago

I'm not sure to understand, why the fact that it run only once will make it so that it return undefined.

brenelz•7mo ago

createAsync doesn't block so the data is undefined until the network request finishes

ClaloiOP•7mo ago

So i just need to do something like that :

const listProject: Component = () => {
const dataList = createEffect(() => createAsync(() => getProjects(),{deferStream: true})
}

const listProject: Component = () => {
const dataList = createEffect(() => createAsync(() => getProjects(),{deferStream: true})
}

brenelz•7mo ago

Just wrap your console log in a createEffect Or render dataList in jsx

const listProject: Component = () => {
    const dataList = createAsync(() => getProjects(), {deferStream: true});
createEffect (() => console.log(dataList());
}

const listProject: Component = () => {
    const dataList = createAsync(() => getProjects(), {deferStream: true});
createEffect (() => console.log(dataList());
}

ClaloiOP•7mo ago

But is there a way to make it usable during the render without have to put it in a createEffect? Because I use ag-grid, so it need the data to load the grid or the only way during render is just to put everything inside a createEffect().

brenelz•7mo ago

The jsx is reactive so this should work

return <>{JSON.stringify(dataList())</>

return <>{JSON.stringify(dataList())</>

REEEEE•7mo ago

I'm using ag-grid in a project too. I use the onGridReady event and then manually set the data

ClaloiOP•7mo ago

It finally work with onGridReady event Thank you

Gaming

Programming

Problem with createAsync.