SolidJS•6mo ago

What Replaced createRouteData?

In older version of SolidStart you could get all routes in a folder. This was useful for doing things like getting all blog articles. It worked like this:

export const routeData = () => {
  return createRouteData(async () => {
    const files = import.meta.glob('.blog/*.mdx')
  })
}

export const routeData = () => {
  return createRouteData(async () => {
    const files = import.meta.glob('.blog/*.mdx')
  })
}

But createRouteData no longer exists in the latest version of SolidStart. How could I do the same thing with the newest version of SolidStart? Thanks, Chris

4 Replies

brenelz•6mo ago

I think you'd use a server function instead (together with createAsync)

ChrisThornhamOP•6mo ago

Thanks. I'll experiment with that.

peerreynders•6mo ago

From the old docs

import { For, Accessor, createResource } from 'solid-js';
import { useRouteData, createRouteData } from 'solid-start';

type Student = { name: string; house: string };

export function routeData() {
  return createRouteData(async () => {
    const response = await fetch('https://hogwarts.deno.dev/students');
    return (await response.json()) as Student[];
  });
}

export default function Page() {
  const students = useRouteData<typeof routeData>();

  return (
    <ul>
      <For each={students()}>{(student) => <li>{student.name}</li>}</For>
    </ul>
  );
}

import { For, Accessor, createResource } from 'solid-js';
import { useRouteData, createRouteData } from 'solid-start';

type Student = { name: string; house: string };

export function routeData() {
  return createRouteData(async () => {
    const response = await fetch('https://hogwarts.deno.dev/students');
    return (await response.json()) as Student[];
  });
}

export default function Page() {
  const students = useRouteData<typeof routeData>();

  return (
    <ul>
      <For each={students()}>{(student) => <li>{student.name}</li>}</For>
    </ul>
  );
}

Would now be

import { For } from 'solid-js';
import { cache, createAsync, type RouteDefinition } from '@solid/router';

type Student = { name: string; house: string };

const getStudents = cache(async () => {
  const response = await fetch('https://hogwarts.deno.dev/students');
  return (await response.json()) as Student[];
}, 'students');

export const route = {
  load() {
    // warm cache
    getStudents();
  },
} satisfies RouteDefinition;

export default function Page() {
  const students = createAsync(() => getStudents());

  return (
    <ul>
      <For each={students()}>{(student) => <li>{student.name}</li>}</For>
    </ul>
  );
}

import { For } from 'solid-js';
import { cache, createAsync, type RouteDefinition } from '@solid/router';

type Student = { name: string; house: string };

const getStudents = cache(async () => {
  const response = await fetch('https://hogwarts.deno.dev/students');
  return (await response.json()) as Student[];
}, 'students');

export const route = {
  load() {
    // warm cache
    getStudents();
  },
} satisfies RouteDefinition;

export default function Page() {
  const students = createAsync(() => getStudents());

  return (
    <ul>
      <For each={students()}>{(student) => <li>{student.name}</li>}</For>
    </ul>
  );
}

GitHub

solid-start/docs/core-concepts/data-loading.mdx at 2f44d456e4814b99...

SolidStart, the Solid app framework. Contribute to solidjs/solid-start development by creating an account on GitHub.

ChrisThornhamOP•6mo ago

Thanks, @peerreynders I tried that pattern, but createAsync didn't like what Vite returned. I ended up with this pattern that works well. I still have to work on the one any I have in there 🙂

export default function BlogHomePage() {
  // DATA =============================================================
  // Use vite to get all mdx files in the articles folder
  const files = import.meta.glob("./articles/*.mdx");

  interface BlogMetaData {
    url: string;
    title: string;
    description: string;
    author: string;
    date: string;
  }

  // STATE ============================================================
  const [articles, setArticles] = createStore<BlogMetaData[]>([]);

  for (const file in files) {
    files[file]().then((metaData: any) => {
      const articleData: BlogMetaData = {
        url: file.replace("./", "/blog/").replace(".mdx", ""),
        title: metaData.title,
        description: metaData.description,
        author: metaData.author,
        date: metaData.date,
      };
      // Sort articles by date.
      setArticles((prevArticles) => {
        const newArticles = [...prevArticles, articleData];
        newArticles.sort(
          (a, b) => parseDate(b.date).getTime() - parseDate(a.date).getTime()
        );
        return newArticles;
      });
    });
  }

  // FUNCTIONS ========================================================
  function parseDate(dateString: string) {
    return new Date(dateString);
  }

  return (
    // render articles here...
  )
}

export default function BlogHomePage() {
  // DATA =============================================================
  // Use vite to get all mdx files in the articles folder
  const files = import.meta.glob("./articles/*.mdx");

  interface BlogMetaData {
    url: string;
    title: string;
    description: string;
    author: string;
    date: string;
  }

  // STATE ============================================================
  const [articles, setArticles] = createStore<BlogMetaData[]>([]);

  for (const file in files) {
    files[file]().then((metaData: any) => {
      const articleData: BlogMetaData = {
        url: file.replace("./", "/blog/").replace(".mdx", ""),
        title: metaData.title,
        description: metaData.description,
        author: metaData.author,
        date: metaData.date,
      };
      // Sort articles by date.
      setArticles((prevArticles) => {
        const newArticles = [...prevArticles, articleData];
        newArticles.sort(
          (a, b) => parseDate(b.date).getTime() - parseDate(a.date).getTime()
        );
        return newArticles;
      });
    });
  }

  // FUNCTIONS ========================================================
  function parseDate(dateString: string) {
    return new Date(dateString);
  }

  return (
    // render articles here...
  )
}

Gaming

Programming

What Replaced createRouteData?