Доступ к результату мутации в Angular Apollo Graphql - PullRequest
Новая
       5

Доступ к результату мутации в Angular Apollo Graphql

0 голосов
/ 17 января 2019

Я новичок в Graphql и использую клиент Apollo с Angular 7.

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

@Injectable({
  providedIn: "root"
})
export class LoginTokenAuthGQL extends Apollo.Mutation<
  LoginTokenAuth.Mutation,
  LoginTokenAuth.Variables
> {
  document: any = gql`
    mutation loginTokenAuth($input: LoginAuthInput!) {
      loginTokenAuth(input: $input) {
        accessToken
        refreshToken
      }
    }
  `;
}

Я запускаю эту мутацию в моем компоненте входа, как это: 

 onLoginSubmit() {
    const email = this.loginForm.controls['userEmail'].value;
    const password = this.loginForm.controls['userPassword'].value;

    console.log('Sending mutation with', email, password);

    this.loginGQL.mutate({
      input: {
        email,
        password,
        userType: AuthUserType.Crm
      }
    }).pipe(
      map((response) => response.data )
    ).subscribe(
      (output: LoginTokenAuth.Mutation) => {
        console.log('Access token', output.loginTokenAuth.accessToken);
        console.log('Refresh token', output.loginTokenAuth.refreshToken);

        console.log(this.apollo.getClient().cache);
      },
      ((error: any) => {
        console.error(error);
      })
    );
  }

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

Из того, что я прочитал из клиента Apollo, все результаты запросов и мутаций кэшируются локально в клиенте. Но мне не понятно, как я могу получить к ним доступ и добавить его в ссылку apollo.

Для большей ясности я хотел бы сделать это в моем модуле Graphql: 

const http = httpLink.create({uri: '/graphql'});

const auth = setContext((_, { headers }) => {

  // get the authentication token from the cache
  const token = ???

  if (!token) {
    return {};
  } else {
    return {
      headers: headers.append('Authorization', `Bearer ${token}`)
    };
  }
});

1 Ответ

0 голосов
/ 17 января 2019

Даже официальные документы Apollo Client предлагают вам сохранить этот токен как обычно - localStorage. 

import { ApolloClient } from 'apollo-client';
import { createHttpLink } from 'apollo-link-http';
import { setContext } from 'apollo-link-context';
import { InMemoryCache } from 'apollo-cache-inmemory';

const httpLink = createHttpLink({
  uri: '/graphql',
});

const authLink = setContext((_, { headers }) => {
  // get the authentication token from local storage if it exists
  const token = localStorage.getItem('token');
  // return the headers to the context so httpLink can read them
  return {
    headers: {
      ...headers,
      authorization: token ? `Bearer ${token}` : "",
    }
  }
});

const client = new ApolloClient({
  link: authLink.concat(httpLink),
  cache: new InMemoryCache()
});
...