Queries

query getAllTasks {
  fn: import { getAllTasks } from "@src/queries"
}

query getFilteredTasks {
  fn: import { getFilteredTasks } from "@src/queries"
}
```

query getAllTasks {
  fn: import { getAllTasks } from "@src/queries"
}

query getFilteredTasks {
  fn: import { getFilteredTasks } from "@src/queries"
}
```

// You don't need to use the arguments if you don't need them
export const getAllTasks = () => {
  return tasks
}

// The 'args' object is something sent by the caller (most often from the client)
export const getFilteredTasks = (args) => {
  const { isDone } = args
  return tasks.filter((task) => task.isDone === isDone)
}
```

<SuperjsonNote />

type Task = {
  id: number
  description: string
  isDone: boolean
}

// our "database"
const tasks: Task[] = [
  { id: 1, description: 'Buy some eggs', isDone: true },
  { id: 2, description: 'Make an omelette', isDone: false },
  { id: 3, description: 'Eat breakfast', isDone: false },
]

// You don't need to use the arguments if you don't need them
export const getAllTasks: GetAllTasks<void, Task[]> = () => {
  return tasks
}

// The 'args' object is something sent by the caller (most often from the client)
export const getFilteredTasks: GetFilteredTasks<
  Pick<Task, 'isDone'>,
  Task[]
> = (args) => {
  const { isDone } = args
  return tasks.filter((task) => task.isDone === isDone)
}
```

<SuperjsonNote />

#### Type support for Queries

Wasp automatically generates the types `GetAllTasks` and `GetFilteredTasks` based on your Wasp file's declarations:

- `GetAllTasks` is a generic type automatically generated by Wasp, based on the Query declaration for `getAllTasks`.
- `GetFilteredTasks` is also a generic type automatically generated by Wasp, based on the Query declaration for `getFilteredTasks`.

Use these types to type the Query's implementation.
It's optional but very helpful since doing so properly types the Query's context.

In this case, TypeScript will know the `context.entities` object must include the `Task` entity.
TypeScript also knows whether the `context` object includes user information (it depends on whether your Query uses auth).

The generated types are generic and accept two optional type arguments: `Input` and `Output`.

1. `Input` - The argument (the payload) received by the Query function.
2. `Output` - The Query function's return type.

Use these type arguments to type the Query's inputs and outputs.

<details>
  <summary>Explanation for the example above</summary>

  The above code says that the Query `getAllTasks` doesn't expect any arguments (its input type is `void`), but it does return a list of tasks (its output type is `Task[]`).

  On the other hand, the Query `getFilteredTasks` expects an object of type `{ isDone: boolean }`. This type is derived from the `Task` entity type.

  If you don't care about typing the Query's inputs and outputs, you can omit both type arguments. TypeScript will then infer the most general types (`never` for the input and `unknown` for the output).

  Specifying `Input` or `Output` is completely optional, but we highly recommended it. Doing so gives you:

  - Type support for the arguments and the return value inside the implementation.
  - **Full-stack type safety**. We'll explore what this means when we discuss calling the Query from the client.
</details>

Read more about type support for implementing Queries in the [API Reference](#implementing-queries).

:::tip Inferring the return type

If don't want to explicitly type the Query's return value, the `satisfies` keyword tells TypeScript to infer it automatically:

```typescript
const getFoo = (async (_args, context) => {
  const foos = await context.entities.Foo.findMany()
  return {
    foos,
    message: 'Here are some foos!',
    queriedAt: new Date(),
  }
}) satisfies GetFoo
```

From the snippet above, TypeScript knows:

1. The correct type for `context`.
2. The Query's return type is `{ foos: Foo[], message: string, queriedAt: Date }`.

If you don't need the context, you can skip specifying the Query's type (and arguments):

```typescript
const getFoo = () => {{ name: 'Foo', date: new Date() }}
```

:::

// ...

const allTasks = await getAllTasks()
const doneTasks = await getFilteredTasks({ isDone: true })
```

// TypeScript automatically infers the return values and type-checks
// the payloads.
const allTasks = await getAllTasks()
const doneTasks = await getFilteredTasks({ isDone: true })
```

Wasp supports **automatic full-stack type safety**.
You only need to specify the Query's type in its server-side definition, and the client code will automatically know its API payload types.

const user = // Get an AuthUser object, e.g., from context.user in an operation.

// ...

const allTasks = await getAllTasks({ user })
const doneTasks = await getFilteredTasks({ isDone: true }, { user })
```

const user = // Get an AuthUser object, e.g., from context.user in an operation.

// TypeScript automatically infers the return values and type-checks
// the payloads.
const allTasks = await getAllTasks({ user })
const doneTasks = await getFilteredTasks({ isDone: true }, { user })
```

const MainPage = () => {
  const { data: allTasks, error: error1 } = useQuery(getAllTasks)
  const { data: doneTasks, error: error2 } = useQuery(getFilteredTasks, {
    isDone: true,
  })

  if (error1 !== null || error2 !== null) {
    return <div>There was an error</div>
  }

  return (
    <div>
      <h2>All Tasks</h2>
      {allTasks && allTasks.length > 0
        ? allTasks.map((task) => <Task key={task.id} {...task} />)
        : 'No tasks'}

      <h2>Finished Tasks</h2>
      {doneTasks && doneTasks.length > 0
        ? doneTasks.map((task) => <Task key={task.id} {...task} />)
        : 'No finished tasks'}
    </div>
  )
}

const Task = ({ description, isDone }: Task) => {
  return (
    <div>
      <p>
        <strong>Description: </strong>
        {description}
      </p>
      <p>
        <strong>Is done: </strong>
        {isDone ? 'Yes' : 'No'}
      </p>
    </div>
  )
}

export default MainPage
```

const MainPage = () => {
  // TypeScript automatically infers return values and type-checks payload types.
  const { data: allTasks, error: error1 } = useQuery(getAllTasks)
  const { data: doneTasks, error: error2 } = useQuery(getFilteredTasks, {
    isDone: true,
  })

  if (error1 !== null || error2 !== null) {
    return <div>There was an error</div>
  }

  return (
    <div>
      <h2>All Tasks</h2>
      {allTasks && allTasks.length > 0
        ? allTasks.map((task) => <Task key={task.id} {...task} />)
        : 'No tasks'}

      <h2>Finished Tasks</h2>
      {doneTasks && doneTasks.length > 0
        ? doneTasks.map((task) => <Task key={task.id} {...task} />)
        : 'No finished tasks'}
    </div>
  )
}

const Task = ({ description, isDone }: Task) => {
  return (
    <div>
      <p>
        <strong>Description: </strong>
        {description}
      </p>
      <p>
        <strong>Is done: </strong>
        {isDone ? 'Yes' : 'No'}
      </p>
    </div>
  )
}

export default MainPage
```

Notice how you don't need to annotate the Query's return value type. Wasp automatically infers the from the Query's backend implementation. This is **full-stack type safety**: the types on the client always match the types on the server.

export const getAllTasks = async (args, context) => {
  throw new HttpError(
    403, // status code
    "You can't do this!", // message
    { foo: 'bar' } // data
  )
}
```

export const getAllTasks: GetAllTasks = async (args, context) => {
  throw new HttpError(
    403, // status code
    "You can't do this!", // message
    { foo: 'bar' } // data
  )
}
```

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

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

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

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

export const getFilteredTasks = async (args, context) => {
  return context.entities.Task.findMany({
    where: { isDone: args.isDone },
  })
}
```

export const getAllTasks: GetAllTasks<void, Task[]> = async (args, context) => {
  return context.entities.Task.findMany({})
}

export const getFilteredTasks: GetFilteredTasks<
  Pick<Task, 'isDone'>,
  Task[]
> = async (args, context) => {
  return context.entities.Task.findMany({
    where: { isDone: args.isDone },
  })
}
```

Again, annotating the Queries is optional, but greatly improves **full-stack type safety**.

```wasp
query getFoo {
    fn: import { getFoo } from "@src/queries"
    entities: [Foo]
}
```

Enables you to import and use it anywhere in your code (on the server or the client):

```js
// Use it on the client
import { getFoo } from 'wasp/client/operations'

// Use it on the server
import { getFoo } from 'wasp/server/operations'
```

On the client, the Query expects

```wasp
query getFoo {
    fn: import { getFoo } from "@src/queries"
    entities: [Foo]
}
```

Enables you to import and use it anywhere in your code (on the server or the client):

```ts
// Use it on the client
import { getFoo } from 'wasp/client/operations'

// Use it on the server
import { getFoo } from 'wasp/server/operations'
```

And also creates a type you can import on the server:

```ts
import { type GetFoo } from 'wasp/server/operations'
```

import { type GetSomething } from 'wasp/server/operations'

```wasp
query getFoo {
    fn: import { getFoo } from "@src/queries"
    entities: [Foo]
}
```

Expects to find a named export `getFoo` from the file `src/queries.js`

```js title="queries.js"
export const getFoo = (args, context) => {
  // implementation
}
```

```wasp
query getFoo {
    fn: import { getFoo } from "@src/queries"
    entities: [Foo]
}
```

Expects to find a named export `getFoo` from the file `src/queries.js`

You can use the generated type `GetFoo` and specify the Query's inputs and outputs using its type arguments.

```ts title="queries.ts"
import { type GetFoo } from 'wasp/server/operations'

type Foo = // ...

export const getFoo: GetFoo<{ id: number }, Foo> = (args, context) => {
  // implementation
};
```

In this case, the Query expects to receive an object with an `id` field of type `number` (this is the type of `args`), and return a value of type `Foo` (this must match the type of the Query's return value).