Add Todos page

Modelence is mostly frontend-agnostic, so you are free to use any routing library you like. We will use React Router for this example, which is what's included in the default Modelence starter.

Create a new client route

Edit src/client/routes.ts to add a new route for our todos:

src/client/routes.ts

import { lazy } from 'react';

export const routes = [
  ...
  // Add this after the other routes
  {
    path: '/todos',
    Component: lazy(() => import('./TodosPage'))
  },
  ...
];

Create the TodosPage component

Create a new component at src/client/TodosPage.tsx:

src/client/TodosPage.tsx

import { useQuery } from 'modelence/client';

export default function TodosPage() {
  /*
    Modelence provides a `useQuery` React hook that fetches data from a module query.
    It will automatically re-fetch the data if/when the query changes and can also accept arguments.
  */
  const { data: todos, isFetching, error } = useQuery('todo.getAll');
  // TODO: add a mutation to add a new todo

  if (isFetching) {
    return <div>Loading...</div>;
  }

  if (error) {
    return <div>Error: {error.message}</div>;
  }

  return (
    <div>
      <h1>Todos</h1>
      <ul>
        {todos.map((todo) => (
          <li key={todo.id}>{todo.title}</li>
        ))}
      </ul>
    </div>
  );
}

Now, you should be able to see your page at http://localhost:3000/todos