>> Переформулирую вопрос: Как сделать выпадающий список Светлое, Темное и Полутемное, чтобы в урлу попало color: "Светлое"|"Темное"|"Полутемное" | null | undefined
Объяснять долго. Сейчас сделаю, отправлю ПР и будешь разбираться. Если что не понятно будет, спросишь.
Подтвердил, разбираюсь!
По выпадающий список направишь где искать решение?
getInitialProps - это функция, которая срабатывает либо при первом заходе на страницу, либо при смене страницы. При чем хитрость в том, что она работает как на сервере, так и на фронте. Когда мы заходим в браузер по адресу и отправляется запрос на сервер, там она срабатывает. А когда страница в ответ загружается в браузер, она не срабатывает, потому что это считается первый заход. При этом ее результат, выполненный на сервере, передается и во фронт, то есть на вход страницы у нас переметры есть. Такая сложность связана с тем, что, как я и говорил ранее, Реакт не асинхронный. То есть просто так при рендеринге компонента у нас нет возможность асинхронно дождаться результата выполнения какого-то запроса. Вот в getInitialProps такие запросы можно выполнять, а потом уже переходит на рендеринг компонента.
Отправил тебе ПР: https://github.com/Pivkarta/pivkarta.ru-2/pull/8
Пока все равно не понял, но буду разбираться. В целом getInitialProps для меня пока не очевидна.
<< А где я скармливаю? Не понял(
variables: {
...getBeersVariables({ query }),
},
То есть ты пережаешь объект variables, в который деградацией отправляешь результат выполнения функции getBeersVariables
>> Вот здесь ты точно накосячил. Потому что getBeersVariables() у тебя возвращает объект {variables, page}, а ты это еще в variables скармливаешь (на уровень вглубь)....
А где я скармливаю? Не понял(
Переформулирую вопрос: Как сделать выпадающий список Светлое, Темное и Полутемное, чтобы в урлу попало color: "Светлое"|"Темное"|"Полутемное" | null | undefined
Вот здесь ты точно накосячил. Потому что getBeersVariables() у тебя возвращает объект {variables, page}, а ты это еще в variables скармливаешь (на уровень вглубь). Это все потому что ты в запрос в генерик не передал второй тип-параметр - BeersConnectionQueryVariables. Вот так:
const result = await apolloClient.query<BeersConnectionQuery, BeersConnectionQueryVariables>({
query: BeersConnectionDocument,
/**
* Важно, чтобы все переменные запроса серверные и фронтовые совпадали,
* иначе при рендеринге не будут получены данные из кеша и рендер будет пустой.
*/
variables: {
...getBeersVariables({ query }),
},
})
Вот передал бы, и получил ошибку:
Type '{ variables: Exact<{ where?: Maybe<BeerWhereInput> | undefined; orderBy?: Maybe<BeerOrderByInput> | undefined; first?: Maybe<number> | undefined; skip?: Maybe<...> | undefined; }>; page: number; }' has no properties in common with type 'Exact<{ where?: Maybe<BeerWhereInput> | undefined; orderBy?: Maybe<BeerOrderByInput> | undefined; first?: Maybe<number> | undefined; skip?: Maybe<...> | undefined; }>'.ts(2559)
UPD: Итоговый вариант вот такой:
BeersPage.getInitialProps = async ({ apolloClient, query }) => {
const { variables } = getBeersVariables({ query })
const result = await apolloClient.query<
BeersConnectionQuery,
BeersConnectionQueryVariables
>({
query: BeersConnectionDocument,
/**
* Важно, чтобы все переменные запроса серверные и фронтовые совпадали,
* иначе при рендеринге не будут получены данные из кеша и рендер будет пустой.
*/
variables,
})
return {
statusCode: !result.data.beersConnection.edges.length ? 404 : undefined,
}
}
export default BeersPage
А так у тебя, если отключить JS, с сервера сотраница приходит без списка пива.