Как управлять загрузками файлов в мутациях GraphQL с помощью Apollo/Graphene

1656638768 kak upravlyat zagruzkami fajlov v mutacziyah graphql s pomoshhyu apollographene

Лукас МакГартленд

RUQEf97I4RpExO9Cx4DeZx-pNaY0dkj6Dczg
Иллюстрация сделана с помощью бумаги от FiftyThree

GraphQL – это отличный способ запрашивать и манипулировать данными. Вы описываете свои данные, спрашиваете то, что хотите и получаете предполагаемые результаты. Проблема в том, что GraphQL обрабатывает только сериализированные данные из коробки – нет возможности скачать файлы непосредственно как часть ваших мутаций.

Но что если бы был способ объединить мощность GraphQL с легкостью загрузки файлов в многокомпонентном запросе? @jaydenseric нашел решение: graphql-multipart-request-spec

Если вы просто хотите, чтобы код работал, перейдите к концу этой статьи, чтобы найти реализацию JavaScript и Python спецификации для Apollo и Graphene.

Обработка загрузок файлов с помощью GraphQL без многокомпонентных загрузок (старый способ)

Vanilla GraphQL не поддерживает опрокидывание необработанных файлов в ваши мутации. Данные, которые вы можете запрашивать и управлять, ограничены тем, что вы можете сериализировать через сеть. На практике это выглядит как основные типы: числа, логические значения и строки. Они прекрасно работают – вы можете создавать почти все, что вам нужно, с базовыми типами данных.

Но что если вам нужно запустить мутацию, которая принимает файл в качестве аргумента? К примеру: загрузка нового изображения профиля. Вот как вы можете справиться с проблемой с помощью обычного GraphQL:

Вариант 1: кодировка Base64

Base64 кодирует изображение и посылает его по проволоке как строку в вашей мутации. Это имеет несколько недостатков:

  1. Файл в кодировании base64 будет примерно на 33% больше исходного двоичного файла.
  2. Оперативно кодировать и декодировать файл стоит дороже.
  3. Комплекс, который необходимо запомнить, правильно кодировать и декодировать.

Вариант 2: Отдельные запросы на загрузку

Для загрузки файлов запустите отдельный сервер (или API). Загрузите файл в первый запрос, а затем передайте полученный URL хранения как часть вашей мутации (второй запрос).

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

  1. Это не асинхронно.
  2. Управлять другим сервером загрузки сложно.

Не было бы просто передать файл как часть параметров мутации?

Введите спецификацию многокомпонентного запроса (новый метод)

Вот здесь и возникает спецификация многокомпонентного запроса. Эта спецификация расширения GraphQL позволяет вам вкладывать файлы где угодно в мутации GraphQL, как это:

{  query: `    mutation($file: Upload!) {      uploadFile(file: $file) {        id      }    }  `,  variables: {    file: File // somefile.jpg  }}

Как видите, добавить файл так же просто, как добавить любой другой тип параметра мутации. Чтобы реализовать эту спецификацию, вам нужно установить две части: одну, работающую на клиенте, а другую, работающую на сервере. Вот что они делают:

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

Итак, в клиенте apollo вы можете запустить мутацию, которая выглядит так:

this.props.mutate({variables: {file: yourFile}})

Реализации спецификации многокомпонентного запроса

Если вы хотите реализовать спецификацию многокомпонентного запроса посредством Apollo, вы можете легко интегрировать ее с этими пакетами, написанными Джейденом Сериком. Это для экосистем JavaScript и Apollo.

jaydenseric/apollo-upload-client
apollo-upload-client – ​​улучшает клиент Apollo для интуитивной загрузки файлов с помощью мутаций GraphQL.github.comjaydenseric/apollo-upload-server
apollo-upload-server – улучшает Apollo GraphQL Server для интуитивной загрузки файлов с помощью мутаций GraphQL.github.com

Если вы запускаете API GraphQL через Graphene и Django, вы можете реализовать спецификацию в Python, заменив свой просмотр GraphQL на этот пакет, который я написал здесь:

lmcgartland/graphene-file-upload
graphene-file-upload – улучшает Graphene Django GraphQL Server для интуитивной загрузки файлов с помощью мутаций GraphQL.github.com

Вывод

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

Если вы хотите поговорить больше, поговорите о GraphQL или отличные шрифты, напишите мне в Twitter @lucasmcgartland. Или найдите меня в другом месте в Интернете ниже:

Веб-сайт | Электронная почта LinkedIn | Twitter | Дриббл

Дальнейшее чтение:

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *