使用Apollo-Client对GitHub API v4进行身份验证

use*_*456 2 javascript github-api apollo reactjs apollo-client

GitHub的新GraphQL API需要使用令牌作为以前的版本进行身份验证。那么,我们如何在HttpLink里面添加“ Header”信息Apollo-Client呢?

const client = new ApolloClient({
  link: new HttpLink({ uri: 'https://api.github.com/graphql' }),
  cache: new InMemoryCache()
});
Run Code Online (Sandbox Code Playgroud)

Ber*_*tel 5

您可以使用定义授权标头apollo-link-context,请检查标头部分

将阿波罗客户端用于Github API的完整示例为:

import { ApolloClient } from 'apollo-client';
import { HttpLink } from 'apollo-link-http';
import { setContext } from 'apollo-link-context';
import { InMemoryCache } from 'apollo-cache-inmemory';
import gql from 'graphql-tag';

const token = "YOUR_ACCESS_TOKEN";

const authLink = setContext((_, { headers }) => {
  return {
    headers: {
      ...headers,
      authorization: token ? `Bearer ${token}` : null,
    }
  }
});

const client = new ApolloClient({
  link: authLink.concat(new HttpLink({ uri: 'https://api.github.com/graphql' })),
  cache: new InMemoryCache()
});

client.query({
  query: gql`
    query ViewerQuery {
      viewer {
        login
     }
    }
  `
})
  .then(resp => console.log(resp.data.viewer.login))
  .catch(error => console.error(error));
Run Code Online (Sandbox Code Playgroud)