Начало работы с WunderGraph: шлюз API, который на лету превращает GraphQL в RPC

Подробное руководство по WunderGraph с акцентом на его новую функцию операций TypeScript — асинхронные преобразователи для выборки данных с общими типами между сервером и клиентом.

В последнее время я часто использую WunderGraph для своих проектов NextJS.

Я действительно копаю это. Он позволяет мне определить все мои источники данных как зависимости в конфигурации — а НЕ жестко запрограммировать в коде моего приложения — которые он затем анализирует в виртуальный граф, из которого я могу писать запросы GraphQL для получения данных. Затем WunderGraph превращает эти операции в простые вызовы JSON поверх RPC.

Это лучший сквозной devex, о котором вы можете мечтать, но, поскольку он может делать ТАК много — самоанализ и консолидация нескольких разрозненных источников данных, автоматически генерируемые хуки безопасности типов в dev, аутентификация и т. д. — это может быть немного сложно. изучить основы WunderGraph.

Поэтому я написал это, чтобы облегчить вам в этом. Это руководство о том, как создать приложение, использующее WunderGraph + NextJS для поиска групп/исполнителей, базирующихся в столице данной страны.

Полный код находится здесь, если вы хотите пропустить его.

Мы рассмотрим некоторые важные функции WunderGraph, что они делают, как их использовать, как развертывать проекты, созданные с их помощью, и некоторые подводные камни, которых следует избегать. Давайте начнем!

Установка

Лучший способ сделать это — пройтись по функциям во время написания кода, так что давайте сделаем именно это. Во-первых, используйте их инструмент CLI для настройки сервера WunderGraph + внешнего интерфейса NextJS.

npx create-wundergraph-app my-project -E nextjs

Затем перейдите в каталог (вы можете назвать его как хотите, а не просто my-project), а затем установите все зависимости с этим.

npm i && npm start

Это также запустит приложение NextJS по адресу localhost:3000. Зайдите на него в своем браузере, и если вы увидите заставку с выводом примерного запроса, все настроено. Пора вернуться в IDE и начать взламывать.

1. ВундерГраф 101

Вот суть работы с WunderGraph.

Шаг 1. Определите источники данных как массив зависимостей

В ./.wundergraph/wundergraph.config.ts вы найдете подход «конфигурация как код» к управлению зависимостями данных, который работает намного лучше для удобочитаемости и удобства обслуживания по сравнению с жестким кодированием ваших источников данных в коде, зафиксированным в репозиториях.

💡 WunderGraph поддерживает API REST и GraphQL OpenAPI, базы данных SQL и NOSQL, федерации Apollo и многое другое. Полный список смотрите здесь.

Мы будем использовать два источника данных: GraphQL Country V2 API (для возврата столицы данной страны) и GraphQL API GraphBrainz (для поиска исполнителей по странам и получения их данных).

Добавьте их в свой файл wundergraph.config.ts вот так, нажмите «Сохранить», и сервер API WunderGraph проанализирует эти два источника данных и сгенерирует/добавит модели и схемы в виртуальный граф.

const countries = introspect.graphql({
  apiNamespace: "countries",
  url: "https://countries.trevorblades.com/",
});

const graphbrainz = introspect.graphql({
  apiNamespace: "graphbrainz",
  url: "https://graphbrainz.fly.dev/",
});

// configureWunderGraph emits the configuration
configureWunderGraphApplication({
  apis: [countries, graphbrainz],
  ...
})

Данные могут быть в базах данных, федерациях Apollo, REST API со спецификациями OpenAPI — что угодно. С WunderGraph вам не нужно создавать отдельные клиенты для работы с каждым.

Если вы хотите, вы также можете проверить внутреннюю схему этого сгенерированного виртуального графа на ./.wundergraph/generated/wundergraph.schema.graphql.. Вы сможете точно увидеть, какие запросы, мутации и подписки вы можете определить для каждого источника данных.

Например, вы увидите, что для запроса страны для этого API требуется параметр code с идентификатором скалярного типа GraphQL.

Шаг 2. Напишите запросы GraphQL для ваших источников данных

Как вы на самом деле получаете данные из этих источников данных? Запросы GraphQL. Вооружившись приведенной выше информацией, теперь вы можете написать свою операцию GraphQL для передачи кода страны (в формате ISO-3166) и поместить два файла .graphql в ./.wundergraph/operations.

Вот два запроса GraphQL, которые нам понадобятся. Следите за пространством имен!

query CapitalByCountry($countryCode: ID!) {
  countries_country(code: $countryCode){
    name
    capital
  }
}
query ($query: String!) {
  graphbrainz_search {
    artists(query: $query, first: 10) {
      edges {
        node {
          name
          discogs {
            images {
              url
            }
            profile
          }
        }
      }
    }
  }
}

Затем, когда вы нажмете Сохранить, Wundernode превратит этот запрос GraphQL в вызов RPC на лету, создав и установив для него конечные точки REST (JSON-over-RPC) по адресу http://localhost:9991/operations/[operation_name ].

💡"Подождите, два независимых, отдельных запроса?" Вам может быть интересно. «Как это может дать нам нужные данные?» Ты получишь печеньку за наблюдательность, но… терпение, юный падаван. Мы доберемся туда.

Затем вы просто нажмете эти конечные точки из своего внешнего интерфейса, чтобы отправить параметры запроса (при необходимости) и получить данные.

Однако, если вы используете NextJS, извлечение данных (и обеспечение безопасности типов) становится намного проще, поскольку WunderGraph также создаст полностью безопасные для типов обработчики выборки данных для вашей среды разработки. Вы можете напрямую использовать их во внешнем интерфейсе. вместо.

2. Крючки Typesafe

Проверьте ./.wundergraph/wundergraph.config.ts еще раз, и вы обнаружите, что WunderGraph поставляется с инфраструктурой генерации кода — и вы можете передать ему шаблоны, чтобы указать, что генерировать. Если вы используете интерфейс командной строки create-wundergraph-app для создания приложения WunderGraph + NextJS, все это уже настроено.

// configureWunderGraph emits the configuration
configureWunderGraphApplication({
  apis: [countries, graphbrainz],
  ...
  codeGenerators: [
    {
      templates: [...templates.typescript.all],
    },
    {
      templates: [new NextJsTemplate()],
      path: "../components/generated",
    },
  ],
  ...
})

Как вы могли догадаться — да, вы можете изменить path , чтобы указать каталог, в который сохраняются сгенерированные WunderGraph хуки.

Здесь мы используем templates.typescript.all , чтобы создать базовый клиент для создания безопасных для типов хуков, и новый экземпляр NextJsTemplate() , чтобы сообщить ему, что мы хотим использовать реализацию хуков WunderGraph NextJS, которая использует SWR Vercel под капотом (это также дает нам удобные вещи, такие как кэширование, повторная проверка , отложенные запросы и т.п. из коробки)

💡Вместо SWR вы также можете использовать Tanstack Query (react-query) с базовым клиентом typescript для своих хуков, если хотите. Для этого отметьте здесь.

Теперь, когда вы определяете любую операцию GraphQL и нажимаете Сохранить, у вас будет доступ к автоматически сгенерированным, полностью типобезопасным хукам для использования во внешнем интерфейсе — useQuery, useMutation, useSubscription — и другие.

Обратите внимание, что приведенные ниже 3 примера НЕ являются окончательным кодом, который мы будем использовать для нашего приложения, но они помогут вам узнать, как работает WunderGraph.

использовать запрос

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

Варианты использования error, isValidating и isLoading очевидны — условный рендеринг и обратная связь с пользователем. Тем не менее, mutate особенно удобен — это функция, которую вы можете вызвать в любое время в коде внешнего интерфейса (возможно, внутри обработчика onClick), чтобы немедленно аннулировать и обновить запрос.

использованиеМутация

Как упоминалось ранее, реализация WunderGraph по умолчанию для клиента NextJS использует оболочку вокруг SWR Vercel для ловушек. В частности, useMutation в WunderGraph использует ловушку SWR useSWRMutation.

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

Вот не надуманный пример. Событие формы onSubmit — это то, что явно запускает эту мутацию, и я передал входные данные, которые требуются моей мутации GraphQL, в качестве аргумента триггерной функции.

использованиеПодписка

WunderGraph поддерживает подписки GraphQL «из коробки» — без необходимости настраивать WebSockets.

Это мультиплексированные потоки HTTP/2 с малой задержкой. Вы определяете подписки в файлах .graphql точно так же, как запросы или мутации, а в NextJS данные — и какой бы пользовательский интерфейс их ни использовал — будут обновляться автоматически. по мере появления новых обновлений.

Получил все это? Хороший. Теперь давайте посмотрим, как мы на самом деле будем использовать useQuery для нашего урока… и ответим на один ваш давний вопрос.

3. Соединения между API

Часто вы будете сталкиваться с ситуациями, когда вам потребуется цепочка запросов данных, где выходные данные первого служат входными данными для второго и так далее.

На самом деле, если вы обратили внимание, вы, вероятно, поняли, что нам также понадобится именно такое кросс-API JOIN для нашего обучающего приложения, так как ни один из двух наших API не может дать нам информацию, в которой мы нуждаемся, в одиночку.

Однако выполнение таких JOIN в коде является одной из самых распространенных проблем для разработчиков, независимо от источников данных. WunderGraph, с другой стороны, упрощает эти соединения между источниками (и выполняет их на уровне виртуального графа) с директивами @internal + @export и полем _join.

Нашему приложению потребуется что-то более сложное, чем это, но сначала давайте рассмотрим простой пример, чтобы объяснить эти соединения между источниками.

Скажем, у вас было два таких источника данных.

Первый возвращает погоду для данного города, а второй может возвращать столицу каждой страны на данном континенте. Если бы мы хотели использовать выходные данные второго в качестве входных данных для первого, мы могли бы просто указать континент и напрямую получить погоду для столицы каждой страны на нем.

Вот как будет выглядеть необходимый запрос GraphQL.

Мы используем @export directive для экспорта значения поля Capital в ключ JOIN ($capital). Затем мы используем готовое поле _join (автоматически предоставляемое WunderGraph для каждого типа объекта) для присоединения к API погоды.

Вернемся к нашему приложению — и проблеме.

Понятно? Хороший. Теперь… возвращаясь к нашему примеру приложения, мы видим, что для нашего конкретного JOIN вывод API стран (который предоставляет нам столицу для данной страны) должен быть связан с вводом API GraphBrainz (который может дать нам все группы и сольные исполнители, которые называют этот город своим домом).

Просто, верно? Но когда вы будете писать этот запрос GraphQL, вы сразу же увидите, что здесь мы столкнулись с проблемой.

Это недопустимый GraphQL.

Запрос graphbainz_search должен предварять любые запросы строкой «area:», чтобы указать, что это будет поиск по местоположению исполнителя. Но GraphQL НЕ поддерживает литералы строковых шаблонов или конкатенацию, как в области JavaScript.

Но... пока не теряйте надежды. Здесь могут помочь функции TypeScript от WunderGraph!

4. Операции TypeScript

Вот убийственная функция WunderGraph.

Если вы не хотите (или не можете) использовать GraphQL, вы можете буквально просто определить пользовательские функции TypeScript для запроса, изменения и подписки на данные вместо этого.

Насколько это важно? Используя операции TypeScript, вы можете совместно использовать одни и те же типы как в бэкенде, так и во внешнем интерфейсе — и, таким образом, получить все преимущества использования TypeScript в обоих — автозаполнение, предложения, рефакторинг и немедленная обратная связь в вашей IDE. если вы используете или возвращаете неправильный тип данных.

Как вы их используете? Прежде всего, операции WunderGraph используют маршрутизацию на основе файлов, аналогичную NextJS. Итак, если вы используете TypeScript, у вас будет get.ts/subscribe.ts/update.ts и т. д. в папке, которая является именем вашей операции, например:

Во-вторых, как будет выглядеть содержимое get.ts? Просто определите форму ввода и напишите функцию async , которая действует как преобразователь. Готово.

Эти операции TypeScript полностью выполняются на сервере — это означает, что вы можете изначально асинхронизировать/ожидать любые промисы внутри них, чтобы получать, изменять, расширять или иным образом возвращать полностью настраиваемые данные из любого источника данных, который вы хотите, и затем используйте точно такие же хуки безопасности типов, которые создает WunderGraph, чтобы вы могли вызывать их из внешнего интерфейса — точно так же, как вы делали это раньше для операций GraphQL.

Это все равно, что получить все преимущества devex от использования серверных компонентов в NextJS 13 — без необходимости переноса вашего приложения на очень сырой, дрянной NextJS 13.

Более того, вы по-прежнему можете использовать в них свои традиционные операции GraphQL!

Решение нашей проблемы.

Теперь, как это может решить проблему, с которой мы столкнулись, выполняя соединение GraphQL?

Что ж, используя операции TypeScript, мы можем вместо этого выполнить JOIN в среде JavaScript, в котором ДЕЙСТВИТЕЛЬНО есть строковые литералы шаблонов и конкатенации! Кроме того, в нашем распоряжении есть еще миллион вариантов проверки и расширяемости, которые мы просто можем нет в GraphQL.

Вот как будет выглядеть наш код при использовании TS Operations.

/.wundergraph/operations/artists/get.ts

💡 Более того, для проверки типов во время выполнения вы можете использовать встроенный Zod для определения форм ответов API и их проверки.

Затем вызовите его из внешнего интерфейса точно так же, как вы бы сделали операцию GraphQL…

const { data, isLoading } = useQuery({
    operationName: "artists/get",
    input: {
      country: query,
    },
  });

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

/components/ArtistCard.tsx

И вуаля! Вот ваше приложение во всей своей красе — последовательное объединение двух операций GraphQL, использование старых простых функций TypeScript для выполнения JOIN на стороне сервера, а затем использование обработчиков типов во внешнем интерфейсе для извлечения и отображения данных.

Лично я считаю, что выполнение этих кросс-API JOIN в функциях TypeScript становится НАМНОГО более интуитивным. Их гораздо проще проверить, поскольку вы не можете протестировать JOIN на игровой площадке WunderGraph GraphQL по адресу localhost:9991/graphiql (эти соединения Cross-API относятся к WunderGraph, а не к GraphQL). Кроме того, кому не понравится встроенный Zod?

Куда пойти отсюда? Давайте посмотрим, как вы можете использовать NextAuth для аутентификации операций GraphQL/TypeScript в WG!

4. Добавление аутентификации в операции WunderGraph с помощью NextAuth.js

Аутентификация неизбежно доставляет неудобства независимо от фреймворка, но NextAuth.js значительно упрощает разработчикам реализацию аутентификации и авторизации.

Но можем ли мы использовать его с WunderGraph?

Вы можете добавить NextAuth в приложение NextJS (интерфейс), и оно будет работать. Однако все, что это делает, — это добавляет уровень аутентификации в ваш пользовательский интерфейс, и только это. Пользователи, которые не вошли в систему, не смогут видеть пользовательский интерфейс или взаимодействовать с ним, да, но запросы все равно будут выполняться на уровне шлюза WunderGraph/API. Вероятно, это не то, что вы имеете в виду, когда думаете об авторизации.

Стратегия

Тогда решение состоит в том, чтобы использовать NextAuth.js перед API-сервером WunderGraph и явно требовать аутентификацию для любых запросов, изменений или обновлений вообще.

Хорошие новости! Вы можете сделать это, используя NextAuth.js со стратегией на основе JWT и написав промежуточное ПО NextJS для внедрения этого токена в каждую операцию WunderGraph (независимо от того, используете ли вы для них GraphQL или TypeScript) через хуки.

Вы также можете использовать этот метод для добавления аутентификации с использованием любых других методов аутентификации, несовместимых с OpenIDConnect, таких как Gotrue от Netlify, Supabase Auth и т. д., которые используют JWT.

Вот как это сделать.

Шаг 1: Базовая реализация NextAuth

Рассмотрение самого NextAuth выходит за рамки этого руководства — поэтому давайте быстро пройдемся по нему, сказав, что вы должны следовать этому Руководству по началу работы.

TL;DR: вернитесь к этому руководству, как только вы:

настроить файлы ENV,
[…nextauth].ts в качестве маршрута API,
_app.tsx обернутый в <SessionProvider> контекст,
и ваши useSession/signIn/signOut хуки и функции в вашем интерфейсе.

Шаг 2. Добавьте аутентификацию на основе токенов в конфигурацию WunderGraph.

В файле wundergraph.config.ts добавьте проверку подлинности на основе токенов в WunderGraph config-as-code. Свойство userInfoEndpoint должно указывать на URL-адрес NextAuth.js, который извлекает текущий сеанс пользователя в формате JSON. Убедитесь, что это настроено правильно, так как WunderGraph вызовет эту конечную точку с заголовком Authorization, содержащим токен JWT, который мы настроим позже.

// configureWunderGraph emits the configuration
configureWunderGraphApplication({
  apis: [countries, graphbrainz],
  ...
  authentication: {
    tokenBased: {
      providers: [
        {
          userInfoEndpoint: `${process.env.NEXT_URL}/api/auth/session`,
        },
      ],
    },
  },

Для получения сеансового JSON это путь по умолчанию, если вы установили NextAuth в /pages/api/auth/[…nextauth].ts, если вы используете другой путь, вам нужно будет соответствующим образом настроить userInfoEndpoint .

Шаг 3. Явно требуйте аутентификацию для всех операций WunderGraph.

Самоочевидный; измените значение по умолчанию false на true в wundergraph.operations.ts.

export default configureWunderGraphOperations<OperationsConfiguration>({
 operations: {
  defaultConfig: {
   authentication: {
    required: true,
     },
    },
  ...
  }
})

Шаг 4: Создайте свои собственные хуки, которые указывают на явный базовый URL

Используя промежуточное ПО NextJS, мы можем добавить токен сеанса NextAuth в заголовок авторизации и перенаправить его в WunderGraph, но если мы все еще хотим использовать наши хуки Next/React, нам придется создать свои собственные вместо использования генерируемых WunderGraph по умолчанию. .

Итак, давайте сначала разберемся с этим.

Просто создайте файл wundergraph.ts с новой папкой lib в корне вашего проекта, чтобы поместить его, и оберните хуки, которые вы будете использовать для использования baseURL.

Шаг 5: Middleware.ts

Затем создайте файл middleware.ts в корне вашего проекта и поместите в него этот код.

Что тут происходит?

Это промежуточное программное обеспечение запускается (до того, как произойдет рендеринг любой страницы) для всех маршрутов, которые запрашивают операцию, то есть для всего, что соответствует базовому URL хуков, которые мы создали на предыдущем шаге (это ваше внешнее приложение NextJS — http://localhost: 3000/api/wg/* в разработке)
Промежуточное ПО переписывает URL-адрес, чтобы он указывал на ваш сервер WunderGraph (http://127.0.0.1:9991/api/* в dev)
Затем он вводит наш токен сеанса NextAuth в этот запрос в качестве заголовка авторизации в формате «Bearer <session token>»,
Наконец, он переходит к фактическому рендерингу страницы (используя NextResponse).

Это заставит каждый запрос нуждаться в этом токене — это означает, что клиент получит результаты данной операции, если и только если запрос аутентифицирован и существует действительный токен сеанса. Ваша интеграция NextAuth теперь блокирует выборку данных во всем приложении, а не только для условного рендеринга во внешнем интерфейсе.

Шаг 6: Домашняя растяжка

Вы почти закончили, но на один шаг. Во внешнем интерфейсе измените используемые вами хуки (useQuery, для нас), чтобы включались только в том случае, если пользователь прошел проверку подлинности, то есть ненулевой session exists.

// import { useQuery, withWunderGraph } from "../components/generated/nextjs";
import { useQuery, withWunderGraph } from "../lib/wundergraph";
//...

const Home: NextPage = () => {
  const { data: session } = useSession();
  //...
  const { data, isLoading } = useQuery({
    operationName: "artists/get",
    input: {
      country: query,
    },
    enabled: !!session, // only run this query if user is logged in
  });

Не забудьте импортировать и использовать хуки (которые работают с промежуточным ПО), которые вы создали на шаге 4, а не те, которые по умолчанию сгенерированы WunderGraph!

5. Как бы я вообще развернул это?

Наше приложение состоит из двух частей:

Основной сервер WunderGraph (WunderNode), который является сервером приложений в Go + NodeJS, который монтирует конечные точки API и обслуживает ваше приложение, и
Интерфейс NextJS.

WunderNode необходимо развернуть на платформе, которая поддерживает Dockerized-образы, например Fly.io или WunderGraph Cloud, а внешний интерфейс NextJS можно развернуть на Vercel или Netlify, как обычно.

На первый взгляд кажется, что для этого вам понадобится монорепозиторий — отдельное приложение NextJS для внешнего интерфейса, которое выполняет только вызовы для получения данных на сервер WunderGraph, и приложение WunderGraph + NextJS, которое вы используете только в dev. Это утомительно, но это сработает; WunderGraph Cloud поддерживает монорепозитории по умолчанию.

Однако, если вы используете WunderGraph Cloud, вам не нужно ничего, кроме уже имеющегося у вас приложения WG + NextJS, что значительно упрощает развертывание. Давайте посмотрим!

Предпосылки

Не забудьте добавить URL-адрес рабочего интерфейса в конфигурацию CORS WunderGraph!

./.wundergraph/wundergraph.config.ts

// configureWunderGraph emits the configuration
configureWunderGraphApplication({
    apis: [countries, graphbrainz],
    // ...
    cors: {
        ...cors.allowAll,
        allowedOrigins: [
          process.env.NEXT_URL
        ],
      },
    // ...
    authentication: {
      tokenBased: {
        providers: [
          {
            userInfoEndpoint: `${process.env.NEXT_URL}/api/auth/session`,
          },
        ],
      },
    },
  // ...
})

Для более детальной конфигурации CORS отметьте здесь.

Развертывание WunderNode

TL;DR:

Перейдите в облако WG, войдите с помощью GitHub.
Предоставьте ему доступ к конкретному репозиторию, который вы хотите развернуть, или используйте один из их шаблонов.
Подождите, пока CI приложения WG GitHub создаст и развернет основную ветвь репозитория, который вы добавляете.
Готово! Перейдите на вкладку Операции и скопируйте ссылку на нужную вам операцию — по сути, она имеет тот же шаблон, что и ваши URL-адреса локального хоста — https://[ваш-wg-cloud-deployment-url]/operations/[имя-операции ]?[параметры]. Для нас это ArtistsGet, который мы определили в файле ./wundergraph/operations/artists/get.ts.
cURL или Postman этот URL с параметрами ?country=AU или аналогичным, чтобы проверить, все ли работает.

Готово!

Развертывание внешнего интерфейса NextJS

Для этого воспользуемся Vercel. Вы можете выполнить эти шаги одновременно с развертыванием WunderNode.

TL;DR:

Создайте учетную запись на Vercel, если у вас ее еще нет, и войдите в нее.
Перейдите на панель инструментов Vercel, нажмите «Добавить новый» → «Проект», затем импортируйте тот же репозиторий NextJSWunderGraph, который вы использовали для развертывания WunderGraph Cloud, и нажмите «Импорт».
Затем перейдите в «Настройки», разверните «Переменные среды» и скопируйте значения NEXTAUTH_SECRET, GITHUB_ID и GITHUB_SECRET из вашего проекта.
Вы не можете скопировать NEXTAUTH_URL как есть (это все еще http://localhost:3000), поэтому добавьте его заново и укажите канонический URL-адрес вашего развертывания Vercel.
В настройках разработчика GitHub сделайте то же самое для URL-адреса обратного вызова для приложения OAuth, которое вы используете для этого проекта. Все, что содержит часть http://localhost:3000, должно быть заменено.
Нажмите «Развернуть». Теперь Vercel создаст и развернет ваш интерфейс. Это может занять некоторое время.
Перейдите на вкладку «Развертывания», и вы сможете увидеть свой развернутый проект и скопировать URL-адрес.

Настройка интеграции WunderGraph с Vercel

Теперь, если вы посетите развертывание Vercel, вы обнаружите, что можете войти в систему — значит, аутентификация работает — но данных нет. Что дает? Ну, это потому, что ваше приложение NextJS в Vercel и ваш WunderNode в WunderGraph Cloud еще не взаимодействуют друг с другом.

Не волнуйтесь, сделать это проще простого!

Перейдите на панель инструментов WunderGraph и в разделе «Настройки» → «Интеграции» вы обнаружите, что он предлагает один для Vercel, и вы можете синхронизировать свои развертывания WunderNode и NextJS таким образом, чтобы убедиться, что вам не нужно больше возиться, чтобы заставить их играть. хороший.

На панели инструментов Vercel вам будет предложено установить эту интеграцию и выбрать проект, с которым вы хотите ее связать. Убедитесь, что ваши развертывания отсортированы, и нажмите «Подключиться».

Готово! Теперь вы можете перейти к своему развертыванию Vercel, войти в свой GitHub (это ваши усилия NextAuth окупаются), выполнить поиск и увидеть поток данных. Отлично!

В итоге…

Надеюсь, теперь вы лучше понимаете, как WunderGraph упрощает работу с различными типами источников данных благодаря мощному самоанализу и использованию GraphQL или операций TypeScript в качестве единого источника достоверности для всех данных. Совместное использование типов между вашим сервером и вашим клиентом невероятно эффективно — вы можете использовать автозаполнение IDE и вывод при разработке клиента!

Если вам нужно создавать модульные приложения с большим объемом данных для современной сети без ущерба для удобства разработчиков или сквозной безопасности типов, возможно, попробуйте WunderGraph. Вы можете ознакомиться с их сообществом Discord здесь.

Начало работы с WunderGraph: шлюз API, который на лету превращает GraphQL в RPC

Установка

1. ВундерГраф 101

Шаг 1. Определите источники данных как массив зависимостей

Шаг 2. Напишите запросы GraphQL для ваших источников данных

2. Крючки Typesafe

использовать запрос

использованиеМутация

использованиеПодписка

3. Соединения между API

Вернемся к нашему приложению — и проблеме.

4. Операции TypeScript

Решение нашей проблемы.

/.wundergraph/operations/artists/get.ts

/components/ArtistCard.tsx

4. Добавление аутентификации в операции WunderGraph с помощью NextAuth.js

Стратегия

Шаг 1: Базовая реализация NextAuth

Шаг 2. Добавьте аутентификацию на основе токенов в конфигурацию WunderGraph.

Шаг 3. Явно требуйте аутентификацию для всех операций WunderGraph.

Шаг 4: Создайте свои собственные хуки, которые указывают на явный базовый URL

Шаг 5: Middleware.ts

Шаг 6: Домашняя растяжка

5. Как бы я вообще развернул это?

Предпосылки

Развертывание WunderNode

TL;DR:

Развертывание внешнего интерфейса NextJS

TL;DR:

Настройка интеграции WunderGraph с Vercel

В итоге…

Вопросы по теме