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?

4 Replies

Martnart•2y ago

I'm mostly guessing here but could this have something to do with a missing key? - Cannot link to docs right now because they seem to still be offline but I mean something like this:

export function routeData({ params }: RouteDataArgs) {
  return createRouteData(
    async (key) => {
      return await api.query({ resourceKey: key })
    },
    {
      key: () => params.theParam,
    }
  )
}

export function routeData({ params }: RouteDataArgs) {
  return createRouteData(
    async (key) => {
      return await api.query({ resourceKey: key })
    },
    {
      key: () => params.theParam,
    }
  )
}

stiba•2y ago

Ah, I'm reading the docs but there's only mention of keys, not any example of how to use it (at least not in the part of the docs where I'm reading)

Martnart•2y ago

Not sure this helps you but here's an exact copy of how we're using it in one place. Just in case you get something out of it

export function routeData({ params }: RouteDataArgs<typeof domainRouteData>) {
  const domainData = createRouteData(
    async (key) => client.dns.domain.query({ fqdn: key[1] }),
    {
      key: () => ['records', params.fqdn],
    }
  )
  const templateResource = createResource(() => client.dns.templates.query())

  return { domainData, templateResource }
}

export function routeData({ params }: RouteDataArgs<typeof domainRouteData>) {
  const domainData = createRouteData(
    async (key) => client.dns.domain.query({ fqdn: key[1] }),
    {
      key: () => ['records', params.fqdn],
    }
  )
  const templateResource = createResource(() => client.dns.templates.query())

  return { domainData, templateResource }
}

stiba•2y ago

Perfect, that solved it! Thanks 🙂

Gaming

Programming

routeData not being refreshed when navigating