next apollo example

Next & Apollo пример

В этом примере используется пакет «Следующей аполло», который идеально подходит, если вы хотите убрать часть церемонии, связанной при использовании Apollo в вашем приложении healh.js. Это также показывает мое предпочтительное решение CSS-In-JS, эмоции.

Демо

Как использовать

Установите и запустите

npm install
npm run dev

Развернуть его в облаке с настоящее время (скачать)

now

Идея примера

Apollo - это клиент GraphQL, который позволяет легко запросить точные данные, которые вам нужны с сервера GraphQL. В дополнение к извлечению и мутированию данных, Аполлон анализирует ваши запросы и их результаты, чтобы построить кэш на стороне клиента ваших данных, что обновляется в настоящее время, когда выполняются дополнительные запросы и мутации, получая больше результатов с сервера.

В этом простом примере мы плавно интегрируем Apollo со следующим, завершая наши страницы в компонент высшего порядка (HOC). Используя шаблон HOC, мы можем передать центральный хранилище данных результатов запроса, созданные Apollo, в нашу иерархию компонентов React, определенную на каждой странице нашего следующего приложения.

На начальной загрузке страницы, в то время как на сервере и внутри getInitialProps мы вызываем метод Аполлона, getDataFromTree . Этот метод возвращает обещание; В тот момент, когда обещание разрешается, наш магазин Apollo Client полностью инициализирован.

Этот пример опирается на Prisma + Nexus для его бэкэнда GraphQL.