stiba Posts - Answer Overflow

stiba

Explore posts from servers

CC#RRailway SSolidJS TtRPC DTDrizzle Team

•Created by stiba on 11/27/2023 in #support

Infinite scrolling solid-start

I'm trying to create something like an infinite scroll. The data I'm fetching requires api-keys etc, so it has to be done server side. The initial data fetches fine, since it's being fetched on the server, but when I try to fetch more, it tries to call my api class from the browser, and the api-key are undefined (naturally). How can I make my fetchMore function only run on the server? Do I need to create an api route ?

4 replies

SSolidJS

•Created by stiba on 10/8/2023 in #support

Route not updating its routeData

Consider the following FileRoutes

/[groupId].tsx // layout
/[groupId]/(groups).tsx
/[groupId]/[matchId].tsx

/[groupId].tsx // layout
/[groupId]/(groups).tsx
/[groupId]/[matchId].tsx

Going from /groupId to /groupId/matchId will trigger [matchId]'s routeData function, but going from [matchId] to another [matchId] does not. Am I doing something wrong?

2 replies

SSolidJS

•Created by stiba on 3/5/2023 in #support

solid-js reactivity eslint with functions

I'm getting the following warning: This function should be passed to a tracked scope (like createEffect) or an event handler because it contains reactivity.eslintsolid/reactivity

<MyComponent
  onPriorityChanged={(priority) =>
    props.onTaskPriorityChanged(task.id, priority)
  }
  onStatusChanged={(status) =>
    props.onTaskStatusChanged(task.id, status)
  }
  onAssigned={(assigneeId) =>
    props.onTaskAssigned(task.id, assigneeId)
  }
/>

<MyComponent
  onPriorityChanged={(priority) =>
    props.onTaskPriorityChanged(task.id, priority)
  }
  onStatusChanged={(status) =>
    props.onTaskStatusChanged(task.id, status)
  }
  onAssigned={(assigneeId) =>
    props.onTaskAssigned(task.id, assigneeId)
  }
/>

What am I doing wrong here? I tried looking at the eslint-plugin docs but I'm not getting any wiser

6 replies

SSolidJS

•Created by stiba on 3/5/2023 in #support

routeData not being refreshed when navigating

Given the following code:

import { Show } from "solid-js";
import type { RouteDataArgs } from "solid-start";
import { useRouteData } from "solid-start";
import { createRouteData } from "solid-start";
import { api } from "~/api";
import { getFetchInit } from "~/api/utils";
import { Sidenav } from "~/components/Sidenav/Sidenav";

export const routeData = ({ params }: RouteDataArgs) => {
  return createRouteData(async (_, event) => {
    const { workspaceSlug, projectSlug } = params;
    const init = getFetchInit(event.request.headers);

    const projectsPromise = api.projects.getByWorkspaceSlug(
      workspaceSlug,
      init
    );
    const workspacePromise = api.workspaces.getDetails(
      { slug: workspaceSlug },
      init
    );
    const tasksPromise = api.tasks.getByProjectSlug(projectSlug, init);
    const membersPromise = api.workspaces.getMembers({ workspaceSlug }, init);

    const [projects, workspace, tasks, members] = await Promise.all([
      projectsPromise,
      workspacePromise,
      tasksPromise,
      membersPromise,
    ]);

    const project = projects.find((project) => project.slug === projectSlug);

    if (!project) throw new Error("Project not found");

    return { projects, workspace, tasks, members, project };
  });
};

export default function Project() {
  const data = useRouteData<typeof routeData>();

  return (
    <main class="flex min-h-full max-h-full">
      <Show keyed when={data()}>
        {(data) => (
          <>
            <Sidenav projects={data.projects} workspace={data.workspace} />
            <section class="flex flex-col flex-grow bg-white/[0.025] min-h-full max-h-full">
              <header class="flex items-center pt-4 px-6 pb-4 bg-black">
                <div class="flex items-center gap-3">
                  <p class="capitalize">{data.workspace.name}</p>
                  <span>-</span>
                  <p class="capitalize">{data.project.name}</p>
                </div>
              </header>
            </section>
          </>
        )}
      </Show>
    </main>
  );
}

import { Show } from "solid-js";
import type { RouteDataArgs } from "solid-start";
import { useRouteData } from "solid-start";
import { createRouteData } from "solid-start";
import { api } from "~/api";
import { getFetchInit } from "~/api/utils";
import { Sidenav } from "~/components/Sidenav/Sidenav";

export const routeData = ({ params }: RouteDataArgs) => {
  return createRouteData(async (_, event) => {
    const { workspaceSlug, projectSlug } = params;
    const init = getFetchInit(event.request.headers);

    const projectsPromise = api.projects.getByWorkspaceSlug(
      workspaceSlug,
      init
    );
    const workspacePromise = api.workspaces.getDetails(
      { slug: workspaceSlug },
      init
    );
    const tasksPromise = api.tasks.getByProjectSlug(projectSlug, init);
    const membersPromise = api.workspaces.getMembers({ workspaceSlug }, init);

    const [projects, workspace, tasks, members] = await Promise.all([
      projectsPromise,
      workspacePromise,
      tasksPromise,
      membersPromise,
    ]);

    const project = projects.find((project) => project.slug === projectSlug);

    if (!project) throw new Error("Project not found");

    return { projects, workspace, tasks, members, project };
  });
};

export default function Project() {
  const data = useRouteData<typeof routeData>();

  return (
    <main class="flex min-h-full max-h-full">
      <Show keyed when={data()}>
        {(data) => (
          <>
            <Sidenav projects={data.projects} workspace={data.workspace} />
            <section class="flex flex-col flex-grow bg-white/[0.025] min-h-full max-h-full">
              <header class="flex items-center pt-4 px-6 pb-4 bg-black">
                <div class="flex items-center gap-3">
                  <p class="capitalize">{data.workspace.name}</p>
                  <span>-</span>
                  <p class="capitalize">{data.project.name}</p>
                </div>
              </header>
            </section>
          </>
        )}
      </Show>
    </main>
  );
}

I would expect data to update when projectSlug updates. Yet it doesn't. What am I doing wrong?

6 replies

SSolidJS

•Created by stiba on 1/31/2023 in #support

UND_ERR_REQ_CONTENT_LENGTH_MISMATCH error when navigating to index route

My index route looks like this

export function routeData() {
  return createServerData$(async (_, { request, fetch: fetcher }) => {
    const response = await fetcher("http://localhost:4000/api/users/self", {
      ...request,
      credentials: "include",
      headers: request.headers,
    });

    if (response.status !== 200) {
      throw redirect("/login");
    }

    return response.json() as Promise<{ id: string }>;
  });
}

const Root: VoidComponent = () => {
  const data = useRouteData<typeof routeData>();
  return (....)
}

export function routeData() {
  return createServerData$(async (_, { request, fetch: fetcher }) => {
    const response = await fetcher("http://localhost:4000/api/users/self", {
      ...request,
      credentials: "include",
      headers: request.headers,
    });

    if (response.status !== 200) {
      throw redirect("/login");
    }

    return response.json() as Promise<{ id: string }>;
  });
}

const Root: VoidComponent = () => {
  const data = useRouteData<typeof routeData>();
  return (....)
}

5 replies

Gaming

Programming