У меня задачу выполнить получилось, но явно через точкуЖ, нужен совет, как вывести поля без перебора полученного массива - ведь мы знаем, что придет только один объект, по запрашиваемому id. Получившийся код [id].tsx такой:
import { useRouter } from 'next/dist/client/router'
import { Page } from 'src/pages/_App/interfaces'
import { NextSeo } from 'next-seo'
import { ParsedUrlQuery } from 'querystring'
import React from 'react'
import {
BeerFragment,
//BeersDocument,
//BeersQuery,
BeersQueryVariables,
useBeersQuery,
} from 'src/modules/gql/generated'
const getVariables = (query: ParsedUrlQuery): BeersQueryVariables => {
const first =
query.first && typeof query.first === 'string'
? parseInt(query.first)
: undefined
const idbeer:any = query.id
return {
first,
where: {
id: idbeer,
},
}
}
const BeerPage: Page = () => {
const router = useRouter()
const variables = getVariables(router.query)
const response = useBeersQuery({
variables,
})
const beers: BeerFragment[] = []
response.data?.beersConnection.edges.map((n) => {
if (n?.node) {
beers.push(n.node)
}
})
//console.log('beers', beers[0]);
//console.log('variables', variables);
//if(beers[0]) {
var beername = beers[0].name
var beerimage = beers[0].image
//}
return (
<>
<NextSeo title={beername} />
{/*router.query.id*/}
<h1>{beername}</h1>
<img src={"https://pivkarta.ru/images/resized/thumb/" + beerimage} alt={beername}/>
</>
)
}
export default BeerPage
Предлагаю пробежсть по коду на предмет что есть что.
-----
const getVariables = (query: ParsedUrlQuery): BeersQueryVariables => {
const first =
query.first && typeof query.first === 'string'
? parseInt(query.first)
: undefined
const idbeer:any = query.id
return {
first,
where: {
id: idbeer,
},
}
}
-----
Здесь мы получаем id из урла и пихаем в idbeer. Объявление переменной связано с желанием избежать ругани ts на не сообветствие типов данных. Изначально было where: { id: query.id, }.
Дальше потребовалось перебрать массив и быбрать первый объект, что явно какая-то дичь. А как не дичь - ищу)
Нужна помощь!