What is the proper way to utilize queries in BlitzJS?

I am attempting to extract data from a table by filtering based on the relationship with the Blitzjs framework. However, I am facing difficulties using queries as it seems to be the only option available. Every time I try to call the query in my component, an error pops up that I am unable to troubleshoot on my own.

// 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
  }
)

Calling the query within 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 (
...
)
}

Encountering 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

Don't miss out on checking this link! I encountered the same issue myself. The solution that worked for me was adding a Suspense wrapper at the top level of my app.tsx.

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Ensuring the presence of TypeScript variables

Take a look at this code snippet: let str: string | null; function print(msg: string) { console.log(msg); } print(str); When running this code, the typescript compiler correctly identifies the error, stating that Argument of type 'string | nu ...

What is the best way to link multiple select tags in an HTML document?

I am working with a data grid that contains student information such as Name, Class, and Score. Each row has a checkbox for selection. The requirement is that when the user selects one or more rows and clicks on the "show information" Button, a new windo ...

How can I modify my Axios Post request to receive a 201 status code in order to successfully save the data?

I am facing an issue when attempting to make a POST request locally with Axios on my NodeJS front-end app to my .NET core local server. The server returns a 204 status code and the axios request returns a pending promise. How can I change this to achieve a ...

What is the method for returning a string array?

My query is about how to return a string[]. Currently, TypeScript is throwing an error because each element of the array has a type of ( T[keyof T] extends readonly (infer InnerArr)[] ? InnerArr : T[keyof T] ). How can I accept the 'property' arg ...

Exploring project references in TypeScript 3 with distinct `outDir` configurations

I am eager to utilize the project references functionality in TypeScript 3.1. Initially, my project's directory structure post-compilation appears as follows: . ├── A │ ├── a.ts │ ├── dist │ │ ├── A │ │ ...

A guide on using sinon to stub express middleware in a typescript project

I'm currently facing a challenge in writing an integration test for my express router using typescript, mocha, sinon, and chai-http. The router incorporates a custom middleware I created to validate JWT tokens present in the header. My goal is to moc ...

Encountered an issue while trying to assign a value to the 'value' property on an 'HTMLInputElement' within a reactive form

When I upload a picture as a data record, the image is sent to a server folder and its name is stored in the database. For this editing form, I retrieve the file name from the server and need to populate <input type="file"> in Angular 6 using reacti ...

Encountering a connection refusal error (ECONNREFUSED) while running 'next build', but everything runs smoothly when using 'next dev'

In my Next.js 9.3.5 project, I have a simple setup with a single page at pages/users and a single API endpoint at pages/api/users that fetches users from a local MongoDB table. When running 'next dev' everything works fine locally, but when tryi ...

Utilize Promise.race() in Playwright Typescript to anticipate the appearance of one of two locators

Recently, I've delved into the world of Typescript while exploring Playwright for Test Automation. There's a scenario where two elements - Validated and Failed - can appear after some loading. In Selenium, my go-to method is to use WebDriverWait ...

Whoops! Looks like there was a hiccup with the Vercel Deployment Edge Function, causing an

Every time I attempt to send a POST request to my Edge Function on Vercel Deployment, I encounter the following error message: [POST] /api/openai reason=EDGE_FUNCTION_INVOCATION_FAILED, status=500, user_error=true TypeError: Illegal invocation at app/api/ ...

Angular POST sends null to .NET Core API

I've been encountering an issue while trying to send data from Angular to my .NET Core API, as the received data always ends up being null. Take a look at my code: Here is the Angular POST request: public insertCategory(categoryToInsert: ICategoryDTO ...

Struggling to delete a specific item by its ID from MongoDB within a Next.js application

Currently, I am building a todo app in nextjs to enhance my skills. However, I'm encountering some difficulties in deleting single todos from the database using the deleteOne function. Below is the frontend call: async function deleteTodo(id) { a ...

Type definition for Vuex store functionality

Working on creating a versatile type to provide typing hints for mutations in Vuex. After reading an inspiring article on Vuex + TypeScript, I decided to develop something more generic. Here is what I came up with: export type MutationType<S, P, K exten ...

Tips for altering the font family in Next JS in conjunction with Material UI

I am currently exploring Next JS and using Material UI for styling. One issue I have encountered pertains to changing the font family without success. In an attempt to modify the font, as demonstrated in the example provided by Material UI on Github, I cre ...

What is the reason for the array length view not updating when a new object is added?

I am dealing with an array of objects and the length is displayed using this code snippet: <strong *ngIf="cart">{{ cart.length }}</strong> Even though when I add items to the array, both the array and its length are showing correctly ...

When debugging in Visual Studio 2013, Typescript variables/fields consistently show up as undefined

What is the reason behind the properties/field variables in Typescript being consistently undefined during debugging in Visual Studio 2013? ...

Customizing pressed row styles and properties within a map iteration in React Native

How can I modify the style of a single item in a list when a button is pressed in React-Native? I want only the pressed item to change, not the entire row. Here is my attempt at implementing this: //hooks const [activeStyle, setActiveStyle] = useState( ...

Issue: Module 'tailwindcss' unable to be located (Next.js project)

After updating my Node Package Manager following the steps mentioned in this post, I encountered an issue. Whenever I create a new Next.js app and try to run it with npm run dev, I receive the error message below: error - ./node_modules/next/dist/build/web ...

The 'authorization' property is not available on the 'Request' object

Here is a code snippet to consider: setContext(async (req, { headers }) => { const token = await getToken(config.resources.gatewayApi.scopes) const completeHeader = { headers: { ...headers, authorization: token ...

The best approach for sending parameters to the parent class in TypeScript for optimal efficiency

What's the optimal solution to this problem? I really appreciate how we can specify attributes in the constructor and TypeScript takes care of handling everything to assign values to the props in JavaScript - like I did with 'department' her ...