Блог

Этот вопрос, вероятно, является признаком моего непонимания философии Apollo / React / GraphQL, но я здесь немного застрял.

Я пишу логику аутентификации для своего одностраничного приложения. У меня есть серверная часть с API GraphQL, которая аутентифицирует пользователей, возвращая пару токенов доступа / обновления JWT. Итак, для входа в систему мне нужно отправить мутацию в конечную точку GraphQL из моего приложения.

Мой интерфейс использует клиент Apollo. Теперь я понимаю, что могу запустить мутацию useMutation , я понимаю, как это работает. Но я также знаю, что перехватчики реакции должны быть указаны в верхней части компонента. Я мог бы вызвать этот useMutation вызов в компоненте входа в систему, но это похоже на плохую инкапсуляцию.

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

Насколько я понимаю, я не могу использовать useMutation здесь, поскольку я не в компоненте React. Я, конечно, могу fetch сам написать вызов:

 export const login = (username, password) => {
    return fetch("/api", {
        method: "POST",
        ...
}
  

но это кажется нечистым, когда я работаю в клиентской экосистеме Apollo. Я что-то упускаю, должен ли я просто выполнить эти вызовы ручной выборки, или я неправильно понимаю всю философию здесь?

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

 const client = new ApolloClient({...})

...

const { data, errors } = await client.mutate({...})