Обновите клиент apollo с ответом на мутацию

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

Когда возвращаются пользовательские данные, я хочу установить состояние клиента apollo, но меня смущают документы о том, как это сделать:

Мой компонент выглядит так:

const LOGIN = gql`
  mutation login($username: String!, $password: String!) {
    login(username: $username, password: $password) {
      username
      fullName
    }
  }
`

const Login = () => {
  const onSubmit = (data, login) => {
    login({ variables: data })
      .then(response => console.info("response", response))
      .catch(err => console.info("err", err))
  }

  return (
    <Mutation 
        mutation = {LOGIN}
        update = {(cache, { data: { login } }) => {

      }}
    >
      {(login, data) => {

        return (
          <Fragment>
            {data.loading ? (
              <Spinner />
            ) : (
              <Form buttonLabel = "Submit" fields = {loginForm} onChange = {() => {}} onSubmit = {e => onSubmit(e, login)} />
            )}

            {data.error ? <div>Incorrect username or password</div> : null}
          </Fragment>
        )
      }}
    </Mutation>
  )
}

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

Пример здесь записывает ответ в кэш cache.writeQuery, но я не уверен, что я хочу это сделать. Разве я не хотел бы писать клиенту (в отличие от кеша), как они это делают в этот пример, где они обновляют локальные данные?

Свойство обновления mutation, кажется, получает только параметр кеша, поэтому я не уверен, есть ли какой-либо способ получить доступ к client в отличие от cache.

Как мне обновить состояние моего клиента apollo с ответом на мою мутацию в свойстве update для mutate?

Обновлено: мой клиент:

const cache = new InMemoryCache()
const client = new ApolloClient({
  uri: "http://localhost:4000/graphql",
  clientState: {
    defaults: {
      locale: "en-GB",
      agent: null /* <--- update agent */
    },
    typeDefs: `
      enum Locale {
        en-GB
        fr-FR
        nl-NL
      }

      type Query {
        locale: Locale
      }
    `
  },
  cache
})

Я не понимаю, какое «состояние» вы хотите установить, примеры, на которые вы ссылаетесь, предназначены для обновления кеша клиента для запросов с кэшированными данными (которые теперь могут быть недействительными из-за выполняемого вами mutation). Вы пытаетесь установить какой-то контекст аутентификации для будущих запросов apollo-client после входа в систему?

ed' 11.07.2018 11:34
stackoverflow.com/q/51081591/8284239
Joe Warner 11.07.2018 11:38

@EdwardSammutAlessi Да, я пытаюсь установить данные пользователя, чтобы потом можно было запросить их. Правильно ли тогда записывать это в состояние клиента? Если да, то как мне этого добиться?

Stretch0 12.07.2018 12:54

@ Stretch0 Нет состояния клиента для записи. Вам нужно хранить эту информацию в другом месте. Если вы хотите сделать что-то вроде добавления заголовка Authentication к своим запросам, изучите возможность использования аполлон-ссылка для изменения ваших запросов перед их отправкой.

ed' 12.07.2018 13:12

@EdwardSammutAlessi, может, я запуталась. Я добавил правку в свой клиентский объект, и, как вы можете видеть, у меня есть значения по умолчанию, в которых agent равен нулю. Когда пользователь входит в систему, я хочу, чтобы агент настроился. Итак, я хочу обновлять кеш или клиент?

Stretch0 12.07.2018 14:18

@ Stretch0 Я вижу, вы используете аполлон-буст для создания своего клиента, который уже связывает apollo-link под названием apollo-link-state. Я действительно не знаю, в чем смысл этого и что вы хотите сделать, поэтому не могу вам помочь.

ed' 12.07.2018 15:49

@EdwardSammutAlessi Я просто хочу установить объект пользователя в моем клиенте apollo. Конечно, это обычный вариант использования?

Stretch0 12.07.2018 15:53
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
2
7
2 511
1

Ответы 1

Использование Context API

Если вы обернули свой компонент где-то выше в иерархии с помощью ApolloProvider

  • Использование АполлонПотребитель

    const Login = () => {
        const onSubmit = async (data, login, client) => {
            const response = await login({ variables: data });
    
            if (response) {
                client.whatever = response;
            }
        };
    
        return (
            <ApolloConsumer>
                {client => (
                    <Mutation mutation = {LOGIN}>
                        {login => <Form onSubmit = {e => onSubmit(e, login, client)} />}
                    </Mutation>
                )}
            </ApolloConsumer>
        );
    };
    
  • Использование с Аполлоном

    const Login = client => {
        const onSubmit = async (data, login) => {
            const response = await login({ variables: data });
    
            if (response) {
                client.whatever = response;
            }
        };
    
        return (
            <Mutation mutation = {LOGIN}>
                {login => <Form onSubmit = {e => onSubmit(e, login)} />}
            </Mutation>
        );
    };
    
    withApollo(Login);
    

Без контекстного API

import { client } from "wherever-you-made-your-client";

и просто ссылайтесь на это там

Это больше похоже на то, чего я пытаюсь достичь. Попробую это и обновлю в ближайшее время. Спасибо

Stretch0 11.07.2018 12:13

Другие вопросы по теме