Привнесение лучшего опыта работы с GraphQL в Svelte


Эта статья была опубликована в понедельник, 4 июля 2022 года, автором Jean-Yves Couët @ The Guild Blog

Сказка о двух проектах

SvelteKit берет штурмом сообщество веб-разработчиков, предоставляя отличное решение
для рендеринга веб-приложений на стороне сервера и упрощая создание «WebApp».
… что бы это ни значило 😅. Хотя большинство распространенных библиотек для GraphQL-приложений имеют
имеют тонкие связки, ни одна из них не вызывает радости. Было трудно избежать ощущения.
что люди пытаются вбить клин в форме React в дыру в форме Svelte.
Независимо друг от друга, Алек и Жан-Ив
решили дать сообществу Svelte что-то лучшее и использовали совершенно разные подходы
к решению проблемы. В конце концов мы связались на GitHub и начали обсуждать плюсы и минусы
каждого подхода. Во время этой команды постоянно всплывал один вопрос:

Как бы выглядел лучший опыт использования #Svelte и #GraphQL?

Было совершенно ясно, что мы оба хотим предоставить «лучшее» решение для использования GraphQL и
Svelte. Было глупо работать независимо друг от друга, поскольку у нас была общая цель.
Поэтому нам оставалось только придумать, как структурировать наши совместные усилия.

Лучшее из двух миров

Хотя сначала мы думали, что Houdini и KitQL решают одну и ту же проблему, во время нашего разговора стало ясно, что KitQL решает одну и ту же задачу.
В ходе нашего разговора стало ясно, что сфера применения KitQL значительно шире, чем у Houdini.
KitQL стремится предоставить наилучшее возможное решение «с батарейками в комплекте» для полностекевых
приложений, построенных на GraphQL и SvelteKit. Это достигается за счет интеграции мощных
инструментов сообщества GraphQL, таких как Yoga,
Envelop, Modules,
Scalars, GraphQL-ESLint и CodeGen
со своим собственным клиентом, который запускается в браузере. С другой стороны, Houdini полностью сфокусирован на
клиентской стороне картины GraphQL и выполняет ту же роль, что и такие библиотеки, как Relay, urql,
и Apollo. С этим осознанием путь вперед был ясен: привнести лучшие части
клиента KitQL в Houdini и интегрировать его с остальными инструментами в стеке KitQL.

Теперь пользователям больше не нужно выбирать между KitQL и Houdini. Если вы ищете:

  • клиент GraphQL, мы рекомендуем использовать Houdini
  • создать приложение с полным стеком, мы рекомендуем KitQL (включая Houdini, конечно 😉).

И он доступен уже сегодня 🎉🎉🎉🎉🎉

Как выглядит использование GraphQL в SvelteKit?

Теперь у вас есть два способа, которые вы можете смешивать и сочетать в своем приложении:

Внешние документы

Вы пишете свой GraphQL запрос во внешнем файле AllItems.gql, например:

query AllItems {
  items {
    id
    name
  }
}
Войти в полноэкранный режим Выйти из полноэкранного режима

И вы можете использовать сгенерированный магазин везде в вашем приложении, как:

<script lang="ts">
  import { GQL_AllItems } from '$houdini'

  $: browser && GQL_AllItems.fetch()
</script>

{#each $GQL_AllItems.data.items as item}
  {item.name}
{/each}
Войти в полноэкранный режим Выйти из полноэкранного режима

Довольно просто, верно? Вы можете поместить этот код в компонент или в маршрут.
Здесь вы выполняете CSR (Client Side Rendering). Браузер выполняет сетевой вызов для получения данных.

Если вы хотите использовать SSR (Server Side Rendering), вам нужно добавить небольшой фрагмент кода в маршрут:

<script context="module" lang="ts">
  import type { LoadEvent } from '@sveltejs/kit';

  export async function load(event: LoadEvent) {
    await GQL_AllItems.fetch({ event });
    return {};
  }
</script>
Вход в полноэкранный режим Выйти из полноэкранного режима

Встроенные документы

При использовании встроенных документов подход немного отличается, но опирается на тот же API магазина под капотом.
Здесь вы пишете только одно, и автоматически получаете CSR и SSR в зависимости от ситуации:

<script>
  import { query, graphql } from '$houdini';

  const { data } = query(graphql`
    query AllItems {
      items {
        id
        name
      }
    }
  `);
</script>

{#each $data.items as item}
  <div>{item.name}</div>
{/each}
Войти в полноэкранный режим Выход из полноэкранного режима

Плюсы и минусы?

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

Некоторые примеры

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

Пример пагинации

Например, вы хотите сделать бесконечную прокрутку пагинации? И загрузить больше элементов?
Просто сделайте 👇

<script lang="ts">
  function loadMore() {
    await GQL_AllItems.loadNextPage()
  }
</script>

<button on:click={loadMore}>Load More</button>

{#each $GQL_AllItems.data.items as item}
  {item.title}
{/each}
Войти в полноэкранный режим Выйти из полноэкранного режима

И все!

Пример мутации для добавления в список

Хотите взять результат мутации и добавить его в список?

Сначала нужно сообщить graphql, что это «специальный» список с помощью директивы:

query AllItems {
  items @list(name: "All_Items") {
    id
    name
  }
}
Войти в полноэкранный режим Выйти из полноэкранного режима

После генерации для вас будет создан фрагмент: All_Items_insert (для использования в мутации).

И это все! Вызовите вашу мутацию, и ваши данные автоматически добавятся в список!

<script lang="ts">
  const mutate = mutation<AddItem>(graphql`
    mutation AddItem($name: String!) {
      addItem(name: $name) {
        ...All_Items_insert
      }
    }
  `);

  function add() {
    mutate({ name: 'my new item name' });
  }
</script>

<button on:click={add}>Add</button>

{#each $GQL_AllItems.data.items as item}
  {item.title}
{/each}
Вход в полноэкранный режим Выход из полноэкранного режима
  • Нет необходимости повторно запускать запрос для получения новых данных в списке.
  • Нет необходимости добавлять список вручную.
  • Не нужно даже помнить, какие именно поля нужно запросить для элемента.

Houdini позаботится обо всем за вас 🎉.

Присоединяйтесь к нам в создании будущего

Мы показали здесь два примера… но многое другое доступно в этих двух проектах.

Пожалуйста, заходите на наши репозитории GitHub, чтобы ⭐ звездить, 🗣️ обсуждать, 🎉 просить о новых функциях и многое другое:

  • Houdini
  • KitQL

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

До скорых встреч! 🤟

Оцените статью
devanswers.ru
Добавить комментарий