Wasp-lang•2w ago

How do I create a page to display a single Task?

Taking the example 'todo' app as an example. How do I create a page to show a single Task? I've given it a go but I've hit a dead end! Using the example from https://wasp-lang.dev/docs/tutorial/pages I have the following but have no idea how to use RouteComponentProps. In main.wasp I have:

route TaskRoute { path: "/tasks/:taskId", to: TaskPage }
page TaskPage {
  authRequired: true,
  component: import TaskPage from "@src/tasks/TaskPage",
}

route TaskRoute { path: "/tasks/:taskId", to: TaskPage }
page TaskPage {
  authRequired: true,
  component: import TaskPage from "@src/tasks/TaskPage",
}

in operations.ts I have:

import { RouteComponentProps } from 'react-router-dom';

import { Task } from 'wasp/entities';
import { type GetTask } from 'wasp/server/operations';

export const getTask: GetTask<void, Task[]> = async (args, context) => {
  const task = await context.entities.Task.findUnique({
    where: { id: taskId },
  });
};

import { RouteComponentProps } from 'react-router-dom';

import { Task } from 'wasp/entities';
import { type GetTask } from 'wasp/server/operations';

export const getTask: GetTask<void, Task[]> = async (args, context) => {
  const task = await context.entities.Task.findUnique({
    where: { id: taskId },
  });
};

3. Pages & Routes | Wasp

In the default main.wasp file created by wasp new, there is a page and a route declaration:

3 Replies

kapa.ai•2w ago

Hi @Kenny. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To create a page to display a single task, you need to use the RouteComponentProps to get the taskId from the URL. You can then use this taskId to fetch the task from the database using a query. First, you need to define a query to fetch a single task. In your main.wasp file, add a query declaration like this:

query getTask {
  fn: import { getTask } from "@src/queries",
  entities: [Task]
}

query getTask {
  fn: import { getTask } from "@src/queries",
  entities: [Task]
}

Then, in your queries.ts file, implement the getTask function:

import { Task } from 'wasp/entities';
import { type GetTask } from 'wasp/server/operations';

export const getTask: GetTask<{ id: number }, Task> = async (args, context) => {
  const task = await context.entities.Task.findUnique({
    where: { id: args.id },
  });
  return task;
};

import { Task } from 'wasp/entities';
import { type GetTask } from 'wasp/server/operations';

export const getTask: GetTask<{ id: number }, Task> = async (args, context) => {
  const task = await context.entities.Task.findUnique({
    where: { id: args.id },
  });
  return task;
};

Now, in your TaskPage.tsx file, you can use the useQuery hook to fetch the task:

import React from 'react';
import { useQuery, getTask } from 'wasp/client/operations';
import { RouteComponentProps } from 'react-router-dom';

type TaskPageProps = RouteComponentProps<{ taskId: string }>;

const TaskPage = ({ match }: TaskPageProps) => {
  const { data: task, isLoading, error } = useQuery(getTask, { id: Number(match.params.taskId) });

  if (isLoading) {
    return <h1>Loading...</h1>;
  }

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

  return (
    <div>
      <h1>Task: {task.description}</h1>
      <p>Is done: {task.isDone ? 'Yes' : 'No'}</p>
    </div>
  );
};

export default TaskPage;

import React from 'react';
import { useQuery, getTask } from 'wasp/client/operations';
import { RouteComponentProps } from 'react-router-dom';

type TaskPageProps = RouteComponentProps<{ taskId: string }>;

const TaskPage = ({ match }: TaskPageProps) => {
  const { data: task, isLoading, error } = useQuery(getTask, { id: Number(match.params.taskId) });

  if (isLoading) {
    return <h1>Loading...</h1>;
  }

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

  return (
    <div>
      <h1>Task: {task.description}</h1>
      <p>Is done: {task.isDone ? 'Yes' : 'No'}</p>
    </div>
  );
};

export default TaskPage;

This will fetch the task with the taskId from the URL and display its description and status. Sources: - The useAction Hook and Optimistic Updates (https://wasp-lang.dev/docs/data-model/operations/actions#the-useaction-hook-and-optimistic-updates) - Adding a Second Page (https://wasp-lang.dev/docs/tutorial/pages#adding-a-second-page) - Invoking the Query On the Frontend (https://wasp-lang.dev/docs/tutorial/queries#invoking-the-query-on-the-frontend) ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @Kenny, I seem to be having a bit of trouble. Don't worry though, I've pinged my support and they will try to fix me up! :technologist: Perhaps try again in 15mins?

Kenny•2w ago

@kapa.ai you're a legend!

kapa.ai•2w ago

Let me check the knowledge base for you. One moment! :books: ---------------------- I'm glad I could help! If you have any more questions about Wasp or need further assistance, feel free to ask. Happy coding! ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @Kenny, I seem to be having a bit of trouble. Don't worry though, I've pinged my support and they will try to fix me up! :technologist: Perhaps try again in 15mins?

Gaming

Programming

How do I create a page to display a single Task?