Блог

Я хотел бы запросить индивидуальный идентификатор с useQuery помощью крючка, getStaticPaths , и getStaticProps в Next.js. Я получил весь список, однако я не знаю, как получить данные для индивидуального идентификатора? Код для всего списка пользователей приведен ниже:

 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 lt;h2gt;Loading....lt;/h2gt;  }  if(isError){  returnlt;h2gt;{error.message}lt;/h2gt;  }   return (  lt;gt;  {  data?.data.map(user =gt; {  return lt;div key={user.id}gt;  lt;Link href={`users/${user.id}`}gt;.{user.name}. lt;/Linkgt;  lt;/divgt;  })  }  lt;/gt;  ) }  export async function getStaticProps(dehydratedState) {  const queryClient = new QueryClient()  await queryClient.prefetchQuery('users', fetchUsers)    return {  props: { dehydratedState: dehydrate(queryClient).toString()}  }; }  

Для индивидуальных удостоверений личности ничего не сработало, я оставил ниже: Он выбирает одного пользователя, но не с помощью запроса React.

 import { dehydrate } from 'react-query/hydration' import Link from 'next/link'  const fetchUsers = () =gt; {  return axios.get('https://jsonplaceholder.typicode.com/users') }  function User({ user }){  return (  lt;divgt;{user.name}lt;/divgt;  ) }  export async function getStaticPaths() {  const res = await fetch('https://jsonplaceholder.typicode.com/users')  const users = await res.json()   const paths = users.map((user) =gt; ({  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  

Третья часть (это единственная выборка идентификатора с гидратом, а не простая Next.js)

 import { QueryClient } from "react-query" import { dehydrate, useQuery } from "react-query" import axios from "axios"  const userIdFetch = (props) =gt; {  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 (  lt;divgt;lt;/divgt;  ) }   export async function getStaticPaths() {  const res = await fetch('https://jsonplaceholder.typicode.com/users')  const users = await res.json()    const paths = users.map((user) =gt; ({  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