ReactQuery in NextJs getStaticPaths - reactjs

Question

I would like to query an individual ID with useQuery hook, getStaticPaths, and getStaticProps in Next.js.
I achieved the whole list, however, I don't know how to get details for individual ID?
The code for the whole list of users is below:
import { QueryClient, useQuery } from 'react-query';
import axios from 'axios'
export default function Index() {
const { isLoading, data, isError, error } = useQuery('users', fetchUsers)
if(isLoading){
return <h2>Loading....</h2>
}
if(isError){
return<h2>{error.message}</h2>
}
return (
<>
{
data?.data.map(user => {
return <div key={user.id}>
<Link href={`users/${user.id}`}>.{user.name}. </Link>
</div>
})
}
</>
)
}
export async function getStaticProps(dehydratedState) {
const queryClient = new QueryClient()
await queryClient.prefetchQuery('users', fetchUsers)
return {
props: { dehydratedState: dehydrate(queryClient).toString()}
};
}
For individual ID's nothing worked, I left below:
It fetches a single user, but not with React Query.
import { dehydrate } from 'react-query/hydration'
import Link from 'next/link'
const fetchUsers = () => {
return axios.get('https://jsonplaceholder.typicode.com/users')
}
function User({ user }){
return (
<div>{user.name}</div>
)
}
export async function getStaticPaths() {
const res = await fetch('https://jsonplaceholder.typicode.com/users')
const users = await res.json()
const paths = users.map((user) => ({
params: { id: user.id.toString() },
}))
return { paths, fallback: false }
}
export async function getStaticProps({ params }) {
const res = await fetch(`https://jsonplaceholder.typicode.com/users/${params.id}`)
const user = await res.json()
return { props: { user } }
}
export default User
The third part (this is the single ID fetch with hydrate, not simple Next.js)
import { QueryClient } from "react-query"
import { dehydrate, useQuery } from "react-query"
import axios from "axios"
const userIdFetch = (props) => {
return axios.get(`https://jsonplaceholder.typicode.com/users/${props.id}`)
}
function User(user){
const { isLoading, data, isError, error } = useQuery(['users', user.id], userIdFetch)
console.log(user)
return (
<div></div>
)
}
export async function getStaticPaths() {
const res = await fetch('https://jsonplaceholder.typicode.com/users')
const users = await res.json()
const paths = users.map((user) => ({
params: { id: user.id.toString() },
}))
return { paths, fallback: false }
}
export async function getStaticProps({ params }) {
const res = await fetch(`https://jsonplaceholder.typicode.com/users/${params.id}`)
const userFetch = await res.json()
const queryClient = new QueryClient()
await queryClient.prefetchQuery('users', userFetch)
return {
props: { dehydratedState: dehydrate(queryClient).toString()}
}
}
export default User