aws
aws
PostsComments
SSolidJS
Created by aws on 12/22/2023 in #support
Best way how to call sever function onClick (SOLVED)
^^^ yes this is it . dont realized i can call fucntion directly from resource. But what i missed is REFRESH !!! function thats the big one. Thanks againg for helping.
16 replies
SSolidJS
Created by aws on 12/22/2023 in #support
Best way how to call sever function onClick (SOLVED)
yes but when i want refresh / call load more items on click i need mutate this signal. and yes its accessor
16 replies
SSolidJS
Created by aws on 12/22/2023 in #support
Best way how to call sever function onClick (SOLVED)
import {Params, action, createAsync, useAction, useSearchParams} from "@solidjs/router";
import {Show, createComputed, createSignal} from "solid-js";
import "tailwindcss/tailwind.css";
import {Photo, getPhotos} from "~/api/photos-api";
import {signRequest} from "~/api/sign";
import "./index.css";

const createAsyncFactory = (params: Params) => createAsync(async () => {
    const dt = Date.now() + 30000;
    const p = {page: params.page ?? 1, date: dt.toString()};
    const sign = await useAction(action(signRequest))(JSON.stringify(p));
    const requestParams = new URLSearchParams({...p, sign});
    return getPhotos(requestParams.toString());
});

export default function Home() {

    const [params] = useSearchParams();
    const [s,setS] = createSignal<Photo[] | undefined>(undefined);
    const [c,setC] = createSignal<boolean>(false);
    setS(createAsyncFactory(params));

    createComputed(() => {
        !!c() ? setS(createAsyncFactory(params)) : setC(false);
        setC(false);
    });
    console.log(s());
    return (
        <Show when={s()}>
        <main>
            <button onClick={() => setC(true)}>AA</button>
            <title class="font-rs">TEST</title>
            <div class="content-center text-center font-rs text-slate-500 text-2xl">TEST  {s()?.length}</div>
        <div id="main" class="flex flex-nowrap">
        </div>
        </main>
        </Show>
    );
}
import {Params, action, createAsync, useAction, useSearchParams} from "@solidjs/router";
import {Show, createComputed, createSignal} from "solid-js";
import "tailwindcss/tailwind.css";
import {Photo, getPhotos} from "~/api/photos-api";
import {signRequest} from "~/api/sign";
import "./index.css";

const createAsyncFactory = (params: Params) => createAsync(async () => {
    const dt = Date.now() + 30000;
    const p = {page: params.page ?? 1, date: dt.toString()};
    const sign = await useAction(action(signRequest))(JSON.stringify(p));
    const requestParams = new URLSearchParams({...p, sign});
    return getPhotos(requestParams.toString());
});

export default function Home() {

    const [params] = useSearchParams();
    const [s,setS] = createSignal<Photo[] | undefined>(undefined);
    const [c,setC] = createSignal<boolean>(false);
    setS(createAsyncFactory(params));

    createComputed(() => {
        !!c() ? setS(createAsyncFactory(params)) : setC(false);
        setC(false);
    });
    console.log(s());
    return (
        <Show when={s()}>
        <main>
            <button onClick={() => setC(true)}>AA</button>
            <title class="font-rs">TEST</title>
            <div class="content-center text-center font-rs text-slate-500 text-2xl">TEST  {s()?.length}</div>
        <div id="main" class="flex flex-nowrap">
        </div>
        </main>
        </Show>
    );
}
Last attempt All works nice but when i hit button AA i can see i send request it returns right data but s signal is undefined. thanks for helping
16 replies
SSolidJS
Created by aws on 12/22/2023 in #support
Best way how to call sever function onClick (SOLVED)
f......... so stupid misstake
16 replies
SSolidJS
Created by aws on 12/22/2023 in #support
Best way how to call sever function onClick (SOLVED)
olk giving this up will try qwik if there is better doc or will make esy api routes. simple thing how to get data from server when i need it. page load / click button. 
import {createAsync} from "@solidjs/router";
import {Show} from "solid-js";
import "tailwindcss/tailwind.css";
import {signRequestT} from "~/api/sign";
import "./index.css";

export default function Home() {

     const getSign = createAsync(signRequestT);


return (
    <Show when={!!getSign()}>
    <main>
      <title class="font-rs">TEST {getSign()}</title>
      <div class="content-center text-center font-rs text-slate-500 text-2xl">TEST</div>
      <div id="main" class="flex flex-nowrap">
      </div>
    </main>
    </Show>
  );
}
import {createAsync} from "@solidjs/router";
import {Show} from "solid-js";
import "tailwindcss/tailwind.css";
import {signRequestT} from "~/api/sign";
import "./index.css";

export default function Home() {

     const getSign = createAsync(signRequestT);


return (
    <Show when={!!getSign()}>
    <main>
      <title class="font-rs">TEST {getSign()}</title>
      <div class="content-center text-center font-rs text-slate-500 text-2xl">TEST</div>
      <div id="main" class="flex flex-nowrap">
      </div>
    </main>
    </Show>
  );
}
"user server";
export const signRequestT = async () => {
    console.log("AA");
    return Date.now().toString();

};
// in real application the should be 
// export const signRequest = (data: any) => {
//     return crypto.createSign("sha512").update(Buffer.from(data)).end().sign(readKeys().privateKey).toString("base64");
// };
// where readkeys need to be performed only on server.
"user server";
export const signRequestT = async () => {
    console.log("AA");
    return Date.now().toString();

};
// in real application the should be 
// export const signRequest = (data: any) => {
//     return crypto.createSign("sha512").update(Buffer.from(data)).end().sign(readKeys().privateKey).toString("base64");
// };
// where readkeys need to be performed only on server.
this gives me "AA" output server / client and console error caught (in promise) Error: Hydration Mismatch. Unable to find DOM nodes for hydration key: 0-0-0-0-0-0-0-1-0-0-0-0-0-0-0-0-0-4-0 @brenelz
16 replies
SSolidJS
Created by aws on 12/22/2023 in #support
Best way how to call sever function onClick (SOLVED)
yes router 0.4.x makes things really easy and straight forward
16 replies
SSolidJS
Created by aws on 12/22/2023 in #support
Best way how to call sever function onClick (SOLVED)
awww i used really old solidjs start 😦
16 replies
SSolidJS
Created by aws on 12/22/2023 in #support
Best way how to call sever function onClick (SOLVED)
Hi thanks for reply basically what i need to do is <button onClick={onClickHandler}>fetch</button> const onClickHandler = () => { //call server function that returns signed request parameters // setStore(createResource(parametersFromServerFunction, async() => {await fetch ....}) } something like this. since iam on router 0.8.5 i dont have actions available when i try updat to 0.10.5 I get TypeError: Comp is not a function my dependencies "dependencies": { "@solidjs/meta": "^0.29.3", "@solidjs/router": "^0.10.5", "solid-js": "^1.8.7", "solid-start": "^0.3.10" } } i tried every single approach but still cant make this work
16 replies