using of queries correctly with BlitzJS?

Question

I'm trying to retrieve data from a table by filtering on the relationship with the Blitzjs framework, but I can't do it using queries, even though it's the only way. When I call the query in my component, I get an error that I can't solve myself

// Query function
import { Ctx, NotFoundError } from "blitz"
import { resolver } from "@blitzjs/rpc"
import { z } from "zod"
import db from "db"

const GetProfile = z.object({
 
  id: z.number().optional().refine(Boolean, "Required"),
})

export default resolver.pipe(
  resolver.zod(GetProfile),
  resolver.authorize(),
  async ({ id }, ctx: Ctx) => {
    // TODO: in multi-tenant app, you must add validation to ensure correct tenant
    const profile = await db.annonceur.findFirst({
      where: {
        user: {
          id: {
            equals: Number(ctx.session.userId),
          },
        },
      },
    })

    if (!profile) throw new NotFoundError()

    return profile
  }
)

calls the query in my component

import { useMutation, useQuery } from "@blitzjs/rpc"
import getProfile from "src/profiles/queries/getProfile"

export default function SideBar({ children, active }: Props) {
  const [profile] = useQuery(getProfile, {  })

  console.log(profile)
  return (
...
)
}

Here the error

[Rendering Suspense fallback...: DYNAMIC_SERVER_USAGE] {
  digest: 'DYNAMIC_SERVER_USAGE'
}
- error {
  name: 'Rendering Suspense fallback...',
  source: 'server',
  message: 'DYNAMIC_SERVER_USAGE',
  digest: 'DYNAMIC_SERVER_USAGE'
}

Answer 1

you should look here! I saw this error, too. I could solve this by adding a top-level Suspense wrapper in my app.tsx.

https://github.com/blitz-js/blitz/issues/3816