Изучайте GraphQL и Apollo! Создайте быстрое приложение портфолио в Next.js (Next 9+) / React, backend с Apollo + Node.js.
Что такое GraphQL ?
GraphQL - это язык запросов для вашего API и серверная среда выполнения для выполнения запросов с использованием системы типов, которую вы определяете для своих данных. GraphQL не привязан к какой-либо конкретной базе данных или хранилищу, а поддерживается существующим кодом и данными.
Что такое Apollo ?
Apollo - это стандартная реализация GraphQL, предоставляющая слой графа данных, который соединяет современные приложения с облаком. Apollo будет осуществлять извлечение данных, кэширование и управление состоянием из коробки!
Что такое Next.js?
Next.js - это фреймоврк React, предоставляющий инфраструктуру и простой опыт разработки для приложения, отображаемого на стороне сервера (SSR).
- Интуитивно понятная система маршрутизации на основе страниц (с поддержкой динамических маршрутов)
- Предварительный рендеринг, статическая генерация (SSG) и рендеринг на стороне сервера (SSR) поддерживаются для каждой страницы отдельно.
Что мы будем строить?
Мы будем работать в основном над функциями портфолио. Вы узнаете, как управлять данными на клиенте и сервере с помощью Apollo и Graphql. Данные будут храниться в базе данных Mongo Atlas, с которой мы будем связываться через Node JS Server. Мы создадим функциональность для создания портфолио, и я объясню вам, как легко управлять формами. Затем мы рассмотрим функцию обновления, где я покажу вам, как заполнять входные данные существующими данными. После этого будем работать над удалением функциональности. Все функции будут реагировать и обновлять вид в режиме реального времени. Вы изучите основы извлечения данных и мутаций данных с помощью Apollo.
Еще одна важная функция, над которой мы будем работать, - это аутентификация на основе сеансов. Пользователи смогут регистрироваться, входить в систему и использовать функции только для аутентифицированных пользователей. Вы узнаете, как управлять сеансами, как защищать страницы и управлять состоянием аутентификации через ваше приложение.
Разработка форума будет самой большой. Вы узнаете, как создать полностью рабочий форум, состоящий из тем и сообщений. Мы интегрируем компонент, который будет использоваться для создания тем и сообщений. Пользователи смогут создавать различные темы, сообщения, а также ответы на другие сообщения, все они обновляются в режиме реального времени, а также в разных браузерах. После этого вы узнаете, как создать полностью работающую нумерацию страниц!
Позже в ходе курса мы создадим функции для получения случайных данных для домашней страницы, и я расскажу о возможности повторного использования. Мы закончим страницу резюме, и мы приступим к развертыванию. После того, как все производственные улучшения будут применены, мы развернем наше приложение на heroku, чтобы любой человек в Интернете мог получить доступ к нашему портфолио.
А актуальная уже 3 версия.
Разница небольшая, например здесь gql импортируется из apollo-boost - https://github.com/webuxmotion/next-cv/blob/main/apollo/queries/index.js
А здесь (3 версия) из @apollo/client - https://github.com/webuxmotion/pereverziev/blob/main/apollo/queries/index.js
Т.к. версия Apollo на сайте более новая, чем в курсе, надо большинство импортировать из @apollo/client
import { gql, useQuery, useMutation, ApolloClient, ApolloProvider, createHttpLink, InMemoryCache } from '@apollo/client';
за исключением:
import { getDataFromTree } from "@apollo/client/react/ssr";