У меня задачу выполнить получилось, но явно через

У меня задачу выполнить получилось, но явно через точкуЖ, нужен совет, как вывести поля без перебора полученного массива - ведь мы знаем, что придет только один объект, по запрашиваемому 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, }.  

Дальше потребовалось перебрать массив и быбрать первый объект, что явно какая-то дичь. А как не дичь - ищу) 

Нужна помощь!