使用Apollo-客户端对GitHub API v4进行认证

本文是小编为大家收集整理的关于使用Apollo-客户端对GitHub API v4进行认证的处理/解决方法，可以参考本文帮助大家快速定位并解决问题，中文翻译不准确的可切换到English标签页查看源文。

中文
English

问题描述

github的新GraphQl API需要以代币作为上一个版本的身份验证.那么，我们如何在Apollo-Client内的httplink中添加"标头"信息?

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

推荐答案

更新-10/2021

使用@apollo/client和graphql软件包:

import { 
  ApolloClient, 
  InMemoryCache, 
  gql, 
  HttpLink 
} from "@apollo/client";
import { setContext } from "@apollo/client/link/context";

const token = "YOUR_TOKEN";

const authLink = setContext((_, { headers }) => {
  return {
    headers: {
      ...headers,
      authorization: token ? `Token ${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));

原始帖子-12/2017

You can define authorization header using apollo-link-context, check 标题部分

使用apollo-client进行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));

本文地址：https://www.itbaoku.cn/post/1938087.html

百度翻译此文有道翻译此文

问题描述

GitHub's new GraphQL API requires authentication with a token as the previous version. So, how do we add a 'Header' information into the HttpLink inside Apollo-Client?

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

推荐答案

Update - 10/2021

Using @apollo/client and graphql packages:

import { 
  ApolloClient, 
  InMemoryCache, 
  gql, 
  HttpLink 
} from "@apollo/client";
import { setContext } from "@apollo/client/link/context";

const token = "YOUR_TOKEN";

const authLink = setContext((_, { headers }) => {
  return {
    headers: {
      ...headers,
      authorization: token ? `Token ${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));

Original post - 12/2017

You can define authorization header using apollo-link-context, check the header section

A complete example for using apollo-client for Github API would be :

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));

上一篇：在分配之前，正在使用的 Typescript 变量

下一篇：更新Apollo GraphQL缓存而不使用refetchQueries？