Raqueebuddin Aziz Posts - Answer Overflow

Raqueebuddin Aziz

•Created by Raqueebuddin Aziz on 8/30/2024 in #support

createAsync not updating UI on client

    const serverBoards = createAsync(async () => {
        const boards = await getBoards(appContext.path);
        const x = await Promise.all(
            boards.map(async (board) => {
                board.title = await decryptWithUserKeys(board.title);
                return board;
            })
        );
        console.log(x);
        return x;
    });

    const serverBoards = createAsync(async () => {
        const boards = await getBoards(appContext.path);
        const x = await Promise.all(
            boards.map(async (board) => {
                board.title = await decryptWithUserKeys(board.title);
                return board;
            })
        );
        console.log(x);
        return x;
    });

the decryptWithUserKeys function is set so that it will return the input if running on server but on client it decrypts the data, the console.log confirms that the function is running and the data is decrypted but the UI never get's update on first load aka ssr load

29 replies

SSolidJS

•Created by Raqueebuddin Aziz on 8/15/2024 in #support

is solid-start dev server broken?

I have been dealing this for quite a while, sometimes in dev solidstart would just not load components that were imported in the root layout passed to router. I would need to do multiple hard refreshes or restart the dev server. the component body always run but no render happened or any effects inside the body run. build has no such issues and it always loads all components correctly repo for reference: https://github.com/vanillacode314/kanban I am using pnpm

5 replies

SSolidJS

•Created by Raqueebuddin Aziz on 8/10/2024 in #support

server functions and ssr, how to get client headers during ssr when calling server functions

I need to get a token from the cookie, everything works greatly as long as the client is calling the server functions but if ssr is triggered and the server makes the calls then the headers are not forwared, what is the best way to achieve this?

1 replies

SSolidJS

•Created by Raqueebuddin Aziz on 8/9/2024 in #support

how to manually invalidate everything in cache in a server function.

I want to send a redirect and invalidate everything

111 replies

SSolidJS

•Created by Raqueebuddin Aziz on 8/9/2024 in #support

how do form actions revalidate data?

I never call revalidate but the boards get updated nonetheless, does form submission revalidate everything?

export default function Home() {
    const boards = createAsync(() => getBoards());
    const submissions = useSubmissions(createBoard);

    createEffect(() => {
        console.log([...submissions.values()]);
    });

    return (
        <div class="flex flex-col gap-4 p-4">
            <div>
                <form action={createBoard} method="post">
                    <input type="hidden" value="Test Board" name="title" />
                    <button class="flex items-center gap-1 rounded bg-neutral-700 px-4 py-2 text-sm font-semibold uppercase">
                        <span class="i-heroicons:plus"></span>
                        <span>Create Board</span>
                    </button>
                </form>
            </div>
            <div class="grid h-full grid-cols-[repeat(auto-fill,minmax(400px,1fr))] gap-4">
                <For each={boards()}>{(board) => <Board board={board} />}</For>
            </div>
        </div>
    );
}

export default function Home() {
    const boards = createAsync(() => getBoards());
    const submissions = useSubmissions(createBoard);

    createEffect(() => {
        console.log([...submissions.values()]);
    });

    return (
        <div class="flex flex-col gap-4 p-4">
            <div>
                <form action={createBoard} method="post">
                    <input type="hidden" value="Test Board" name="title" />
                    <button class="flex items-center gap-1 rounded bg-neutral-700 px-4 py-2 text-sm font-semibold uppercase">
                        <span class="i-heroicons:plus"></span>
                        <span>Create Board</span>
                    </button>
                </form>
            </div>
            <div class="grid h-full grid-cols-[repeat(auto-fill,minmax(400px,1fr))] gap-4">
                <For each={boards()}>{(board) => <Board board={board} />}</For>
            </div>
        </div>
    );
}

8 replies

SSolidJS

•Created by Raqueebuddin Aziz on 8/8/2024 in #support

what does returning an error from a server function do? I don't see it in the console anywhere.

I see the documentation recommends returning an error instead of throwing it, what does that do actually? where can I see the error? how can I handle the error on the client and show a toast or something else

9 replies

SSolidJS

•Created by Raqueebuddin Aziz on 8/8/2024 in #support

is "use server" necessary for form actions in solid start?

the documentation doesn't include "use server" but I couldn't get it to work without that directive. Just trying to figure out if it is a bug or intended and the documentation needs to be updated

10 replies

SSolidJS

•Created by Raqueebuddin Aziz on 8/8/2024 in #support

How does useSession work from vinxi?

I am not sure if it's documented anywhere how does it actually work, my questions - does it set cookies? - what is the secret passed to the config for - is it jwt?

4 replies

SSolidJS

•Created by Raqueebuddin Aziz on 8/8/2024 in #support

how to redirect from form actions

I want to redirect to the index page from signin form action on successful with Any insight would be helpful My current code doesn't redirect

const signIn = action(async (formData: FormData) => {
    'use server';
    const email = String(formData.get('email'));
    const password = String(formData.get('password'));

    const [user] = await db
        .select({ id: users.id, passwordHash: users.passwordHash })
        .from(users)
        .where(eq(users.email, email));

    if (!user) return new Error('Invalid Credentials');

    if (!(await bcrypt.compare(password, user.passwordHash))) return new Error('Invalid Credentials');

    const token = jwt.sign({ id: user.id }, process.env.AUTH_SECRET!, {
        expiresIn: '3 days'
    });

    const event = getRequestEvent()!;
    setCookie(event.nativeEvent, 'accessToken', token, {
        httpOnly: true,
        secure: true,
        path: '/',
        sameSite: 'lax'
    });
    return redirect('/');
}, 'signin');

const signIn = action(async (formData: FormData) => {
    'use server';
    const email = String(formData.get('email'));
    const password = String(formData.get('password'));

    const [user] = await db
        .select({ id: users.id, passwordHash: users.passwordHash })
        .from(users)
        .where(eq(users.email, email));

    if (!user) return new Error('Invalid Credentials');

    if (!(await bcrypt.compare(password, user.passwordHash))) return new Error('Invalid Credentials');

    const token = jwt.sign({ id: user.id }, process.env.AUTH_SECRET!, {
        expiresIn: '3 days'
    });

    const event = getRequestEvent()!;
    setCookie(event.nativeEvent, 'accessToken', token, {
        httpOnly: true,
        secure: true,
        path: '/',
        sameSite: 'lax'
    });
    return redirect('/');
}, 'signin');

28 replies

SSolidJS

•Created by Raqueebuddin Aziz on 2/28/2024 in #support

is it possible to use matchFilters from @solidjs/router in file routes?

import { useParams } from '@solidjs/router'
import { Show, createResource } from 'solid-js'
import { query } from '~/lib/db/utils'

export default function ListPage() {
    const params = useParams()

    const [file] = createResource(
        () => params.id,
        () => query.getFile(Number(params.id))
    )

    return (
        <Show when={file()}>
            {(file) => (
                <div class="container p-4 mx-auto">
                    <pre>{JSON.stringify(file(), null, 2)}</pre>
                </div>
            )}
        </Show>
    )
}

import { useParams } from '@solidjs/router'
import { Show, createResource } from 'solid-js'
import { query } from '~/lib/db/utils'

export default function ListPage() {
    const params = useParams()

    const [file] = createResource(
        () => params.id,
        () => query.getFile(Number(params.id))
    )

    return (
        <Show when={file()}>
            {(file) => (
                <div class="container p-4 mx-auto">
                    <pre>{JSON.stringify(file(), null, 2)}</pre>
                </div>
            )}
        </Show>
    )
}

I want to subset params.id to specific values and return 404 if not in range, with normal routes I would use a matchFilter, what can I use when filerouting?

6 replies

SSolidJS

•Created by Raqueebuddin Aziz on 3/16/2023 in #support

Does <Show> narrow types in typescript?

I am getting undefined errors even though I wrap it in a show block.

12 replies

SSolidJS

•Created by Raqueebuddin Aziz on 2/16/2023 in #support

useParams doesn't auto decode URI component?

I am getting %20 instead of spaces in my app

1 replies

SSolidJS

•Created by Raqueebuddin Aziz on 2/10/2023 in #support

api route errors not being logged and the dev server just stops

2 replies

SSolidJS

•Created by Raqueebuddin Aziz on 1/19/2023 in #support

is there an isServer signal or boolean?

I need to ssr a loading state always from the server as the actual data is in users localStorage so ssring not found state doesn't make much sense. Thanks

7 replies

SSolidJS

•Created by Raqueebuddin Aziz on 12/13/2022 in #support

How to update nested store values such that it triggers updates

I have a store with the shape IUserState. Now I want to update some projectGroup to add a new project to it. How can I achieve this so that updates are triggered?

export interface IUserState {
  projectGroups: IProjectGroup[];
}

export interface IProjectGroup {
  name: string;
  projects: IProject[];
}

export type IProject =
  | {
      name: string;
      description: string;
      logs: IActivityLog[];
    } & Xor<
      { paid: true; hourlyRate: number; currency: string },
      { paid: false }
    >;

export interface IUserState {
  projectGroups: IProjectGroup[];
}

export interface IProjectGroup {
  name: string;
  projects: IProject[];
}

export type IProject =
  | {
      name: string;
      description: string;
      logs: IActivityLog[];
    } & Xor<
      { paid: true; hourlyRate: number; currency: string },
      { paid: false }
    >;

I tried this, it does update the store but doesn't trigger updates.

setUserState(
  "projectGroups",
  produce((projectGroups) => {
    projectGroups[groupIndex].projects = [
      ...projectGroups[groupIndex].projects,
      (formData.paid
        ? {
            name: formData.name,
            description: "",
            paid: true,
            logs: [],
            hourlyRate: formData.hourlyRate,
            currency: formData.currency,
          }
        : {
            name: formData.name,
            description: "",
            logs: [],
            paid: false,
          }) as IProject,
    ];
  })
);

setUserState(
  "projectGroups",
  produce((projectGroups) => {
    projectGroups[groupIndex].projects = [
      ...projectGroups[groupIndex].projects,
      (formData.paid
        ? {
            name: formData.name,
            description: "",
            paid: true,
            logs: [],
            hourlyRate: formData.hourlyRate,
            currency: formData.currency,
          }
        : {
            name: formData.name,
            description: "",
            logs: [],
            paid: false,
          }) as IProject,
    ];
  })
);

Thanks for any assitance 🙂

5 replies

Gaming

Programming