SolidJS•10mo ago

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?

4 Replies

jacobgoodwin•10mo ago

I'm not sure if this is the preferred approach, but you do have access to the params in the load function. So you might be able to do something like below, where I wrapped the validateFileId in a cache because I believe this is the only way to properly handle either returning a redirect. I've become used to using throw redirect, but I was having issues with this and I'm not sure why, but returning a redirect seems to work (maybe a recent API change, as I just created a fresh solid-start repo, and it's now v 0.6.0, as of today).
The good news is the blow seems to work with solid-start with bother CSR and SSR.

import { RouteDefinition, RouteSectionProps, cache, redirect } from "@solidjs/router";

const validateFileId = cache((fileId: string) => {
  const id = Number(fileId);
  console.debug('In the loader function', { id });
  if (id > 10) {
    console.warn('Whoopsies, this is OUTTABOUNDS, you ignoramous!');
    return redirect('/error-page-or-route', { status: 404 });
  }

  // some API data here
  return {
    data: 'abc123',
  };
}, 'file')

export const route = {
  load: (args) => {
    console.debug('the route args', args);
    validateFileId(args.params.id);
  }
} satisfies RouteDefinition;

export default function FilePage(props: RouteSectionProps) {

  return (
    <h1>This page has param id: {props.params.id}</h1>
  )
}

import { RouteDefinition, RouteSectionProps, cache, redirect } from "@solidjs/router";

const validateFileId = cache((fileId: string) => {
  const id = Number(fileId);
  console.debug('In the loader function', { id });
  if (id > 10) {
    console.warn('Whoopsies, this is OUTTABOUNDS, you ignoramous!');
    return redirect('/error-page-or-route', { status: 404 });
  }

  // some API data here
  return {
    data: 'abc123',
  };
}, 'file')

export const route = {
  load: (args) => {
    console.debug('the route args', args);
    validateFileId(args.params.id);
  }
} satisfies RouteDefinition;

export default function FilePage(props: RouteSectionProps) {

  return (
    <h1>This page has param id: {props.params.id}</h1>
  )
}

Raqueebuddin AzizOP•10mo ago

Thanks for the tip, I was hoping to find a solution without redirect to preserve the url is cache from @solidjs/router documented somewhere? never saw it before

Brendonovich•10mo ago

https://github.com/solidjs/solid-router?tab=readme-ov-file#cache

GitHub

GitHub - solidjs/solid-router: A universal router for Solid inspire...

A universal router for Solid inspired by Ember and React Router - solidjs/solid-router

Raqueebuddin AzizOP•10mo ago

Thanks

Gaming

Programming

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