How to send a dynamic URL parameter to a function in Next.js TypeScript without using implicit typing

Question

How to send a dynamic URL parameter to a function in Next.js TypeScript without using implicit typing

When utilizing the useRouter function with a parameter of type string, the following error is encountered:

Type 'string | string[] | undefined' is not assignable to type 'string'. Type 'undefined' is not assignable to type 'string'

Is there a way to resolve this error without using implicit typing?

import { useRouter } from 'next/router'
import { useBlogQuery } from '@graphql/generated'

const router = useRouter()
const blogId = router.query.blogId

const BlogQuery = useBlogQuery({
    variables: {
        id: blogId
    },
})

reactjs typescript next.js graphql

Answer 1

Answer №1

This type of error detection can actually be quite helpful.

For instance:

www.example.com router.query.blogId = undefined
www.example.com/?blogId=1&blogId=2 router.query.blogId = [1, 2]
www.example.com/?blogId=1 router.query.blogId = 1

If you are absolutely certain that cases 1 & 2 will never occur, you could handle it like this:

const blogId = router.query.blogId as string;

However, it might be a better practice to implement some logic for when blogId is either undefined or an array.

Answer 2

This type of error detection can actually be quite helpful.

For instance:

www.example.com router.query.blogId = undefined
www.example.com/?blogId=1&blogId=2 router.query.blogId = [1, 2]
www.example.com/?blogId=1 router.query.blogId = 1

If you are absolutely certain that cases 1 & 2 will never occur, you could handle it like this:

const blogId = router.query.blogId as string;

However, it might be a better practice to implement some logic for when blogId is either undefined or an array.

How to send a dynamic URL parameter to a function in Next.js TypeScript without using implicit typing

Answer №1

Similar questions

Guide on retrieving and presenting images in React from a Cloudinary URL stored in MongoDB

trouble with react-table's default height and flexible design

Important notice: It is not possible to assign refs to function components. Any attempt to do so will result in failure. If you intended to assign a ref, consider

A custom function that changes the state of a nested object using a specified variable as the key argument

How can I stop MUI Button from automatically becoming fullWidth?

Submit a collection of images and an object to the server using ReactJS

React- Struggling to modify state from child component using function declared within a parent component

What could be causing my React components to not display my CSS styling properly?

Adding a fresh element and removing the initial item from a collection of Objects in JavaScript

I attempted to post a collection of strings in ReactJS, only to receive a single string response from the Web

Struggling to maintain consistent updates on a child element while using the @Input property

Tips for moving a polygon while dragging a marker within its boundaries

Develop an event listener in a React Component that watches for changes

What is the process for downloading a package from unpkg or adding an unpkg package to dependencies?

Exploring the latest MUI Styles in Scoping Version 5

Having difficulty animating the height transition of the NextJS Image component

The React application's route is not functioning properly following deployment on IIS

Backend is currently unable to process the request

Tips for transferring data from a service to a method within a component

How can I ensure that every dependency in my package.json is updated to the newest version using Yarn?