Как правильно сделать мутации Apollo HOC

1656487688 kak pravilno sdelat mutaczii apollo hoc

автор Лаклан Янг

DZuo0UF0jsWooMxWtRIxuIUxhIgun5XIHxJb
Экспертная пользовательская графика.

Скорее всего, как и многие люди, вы пришли в Apollo и GraphQL с фона REST API. Но когда вы начнете исследовать рабочие примеры этого стека и различные способы его реализации, вы, несомненно, столкнетесь с множеством отличий, будь то библиотеки Аполлона или «получайте свои данные так, как хотите». ментальность вокруг GraphQL и компонентов визуализации Apollo

В этой статье я хочу помочь решить две ключевые проблемы при написании мутации. Это, в первую очередь, нацелено на реализации HOC, однако более или менее сродни компонентам визуализации, вместо этого настраивая ключи объекта на props.

В частности, мы перейдем непосредственно к optimisticResponse вместе с параметрами обновления вашей мутации HOC. Я надеюсь, что это позволит вам лучше понять, какие у вас есть варианты, когда дело доходит до реализации мутации как функции опоры.

Важно: Если вы только начинаете работать с Apollo, я от всего сердца умоляю вас реализовать их компоненты визуализации, которые они выпустили в версии 2.1. HOC мягкие устаревшие и, как таковые, им не хватает значительной части своей документации, как упоминали здесь несколько человек.

Оптимистический ответ

optimisticResponse — это способ, которым мы управляем, есть ли наша программа онлайн или нет, а также статус наших запросов в БД.

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

Напримересли мы допустим, что мы добавим этого пользователя к БД:

{    userId: 123,    firstName: "Lachlan",    lastName: "Young",    status: "Hungry"}

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

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

Когда вы снова подключитесь к Интернету или достигнете своей базы данных, она обновит ответ действительными данными. Внутри этого ответа можно обрабатывать такие вещи, как userId, которые вы генерируете на клиенте, поэтому обновляя мой жестко закодированный идентификатор 123 к UUID.

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

Это оптимистический ответ.

Обновление

Что касается того, как обрабатывать ответ из базы данных, вы действительно имеете доступ к свойству под названием обновлениеа для HOC это выглядит так:

update: (proxy, { data: { myDetails } }) => {    try {        // Read the data from our cache for this query.        const data = proxy.readQuery({             query: gql`${GET_MY_DETAILS}`        });
        // Add our new request from the mutation to the end.        data.getMyDetails.push(myDetails);
        // Write our data back to the cache.        proxy.writeQuery({             query: gql`${GET_MY_DETAILS}`,            data        });    } catch (err) {        console.log('Error updating the cahche: ', err.message);    }}

По сути это происходит после оптимистического поля Response в мутации. Он непосредственно обрабатывает происходящее после того, как вы получите ответ, принимая его сверху proxy и data поскольку это два аргумента. Proxy является буквально нашим клиентом, однако для некоторых конфигураций вам может быть лучше ссылаться на него как на кэш. Data это ответ от мутации. В этом случае я деконструировал его, чтобы дополнительно объяснить объект myDetails.

myDetails состоит из всего вышеприведенного пользовательского объекта, но идентификатор теперь будет действительным UUID вместо 123. Затем мы используем методы apolloClient для чтения и записи и читаем детали, которые мы сохранили в нашем кэше. Оттуда мы добавляем новые детали и повторно записываем их в кэш. Таким образом, после того, как я вернусь к своим данным со страницы ввода, мои новые данные будут мгновенно доступны, поскольку они являются точкой правды в кэше.

Дополнительная информация

На момент написания этого текста все параметры визуализации, задокументированные здесь или приведенные ниже для долговечности, могут быть применены к вашей мутации HOC. Как я упоминал во вступлении в эту статью, документация HOC действительно устарела. Однако все следующие параметры могут быть реализованы как ключи к объекту HOC.

ZSBBl-U4RRMGxZ6RavWDiL0RRlvTi5-h92MP
Реквизит мутации 12.04.2018

Спасибо, что читаете. Обычно вы можете увидеть, как я плаваю вокруг Apollo Slack по каналам #React-Apollo или #Apollo-Client. Чтобы зарегистрироваться для участия в программе Slack и получить более конкретные советы, нажмите здесь.

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

Ваш адрес email не будет опубликован.