Начальная картина.
Со страницы /beers/ ссылкой передается id пива. Хук useRouter() принимает запрос, что позволяет id вернуть через {router.query.id}.
Первым делом давайте посмотрим сюда https://github.com/linklib/pivo-moscow/blob/master/src/gql/Beer.graphql на предмет данных, которые можно получить с пивкарты: для пива это id, name, uri. Нам не хватает картинки.
На https://pivkarta.ru/api/ можно посмотреть все ,что можно вытащить с пивкарты. Сейчас нам не хватает картинки: это будет image, то есть запрос станет таким:
query beers($where: BeerWhereInput, $first: Int = 3, $skip: Int) {
beersConnection(where: $where, first: $first, skip: $skip) {
aggregate {
count
}
edges {
node {
...beer
}
}
}
}
fragment beer on Beer {
id
name
uri
image
places {
id
price
Place {
...place
}
}
}
fragment place on Place {
id
name
uri
}
После внесения изменений следует перегененировать типы:
yarn generate:types
За основу предлагаю взять эту страницу https://github.com/linklib/pivo-moscow/blob/master/src/pages/Beers/index.tsx - здесь есть запрос.
То есть нам надо на основе запроса, который возвращает данные по пиву (по дефолту первых трех в бд), составить зарпрос, который вернет данные только нужного пива по id.