Проект #pivo-moscow. Обсуждение Задачи №1. На конечной странице пива вывести название пива и картинку

Jan 23, 2021

Задача https://freecode.academy/tasks/ckk9tbrgqpcjw0730kc5mkzd1

Comments

Jan 23, 2021

Начальная картина. Со страницы /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.

Попов Дмитрий

Jan 24, 2021

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

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

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

Попов Дмитрий

Jan 24, 2021

Понял, что не там пишу код страницы и перенес в src/pages/Beer/index.tsx. А в [id].tsx оставил export { default } from 'src/pages/Beer'

Николай Ланец

Jan 24, 2021

Дима, зайди в экшены https://github.com/linklib/pivo-moscow/actions и активируй их, чтобы тесты на гитхабе выполнялись.

Николай Ланец

Jan 24, 2021

И лучше не все в мастер сразу делай, а выноси в логические бранчи и пуши на гитхаб, чтобы можно было видеть что ты делаешь, ревьюить, скачивать себе править и т.п.

Николай Ланец

Jan 24, 2021

А за основу имело смысл взять вот эту страницу: https://github.com/freecode-academy/freecode.academy/blob/master/pages/technologies/%5Bid%5D.tsx

Ведь у нее такой же роутинг как и у тебя - по id. Можно его страницу буквально брать 1:1 и просто заменить Technology на Beer https://github.com/freecode-academy/freecode.academy/blob/master/src/pages/Technologies/Technology/index.tsx

Запрос тоже по образу и подобию можешь воткнуть https://github.com/freecode-academy/freecode.academy/blob/master/src/pages/Technologies/Technology/gql/technology.graphql.

Затем выполни yarn generate:types, и если ОК выполнится, у тебя будет метод для запросов useBeerQuery. Все, дальше дело техники: получи данные и выведи в нужном тебе виде.

Пробуй. Если что не так, выливай на гитхаб и маякуй.

Проект #pivo-moscow. Обсуждение Задачи №1. На конечной странице пива вывести название пива и картинку

Comments

Server Error