reactjs - 在进行客户端查询时，我应该如何为 Github graphql API 提供身份验证？

Question

我正在尝试使用 Apollo Client 向 GitHub graphql API 发出客户端请求，但存在一个我无法解决的 401 身份验证问题。

我已将查询换成另一个不需要身份验证的 API，并确认它按预期工作。

我可以使用 getServerSideProps(它是一个 Next.js 应用程序)在服务器端发出成功的请求，所以我知道凭据没问题。

我在这里错过了什么？这是 CORS 问题吗？ (例如 How to fix authentication error when querying Yelp GraphQL API using Apollo Client)

提前致谢。下面的代码，以及此处对方法的引用:https://www.apollographql.com/blog/apollo-client/next-js/next-js-getting-started/ .

---

客户端的句柄在 apollo-client.js 中定义:

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

export const getApolloClient = () => {
  const httpLink = createHttpLink({
    uri: "https://api.github.com/graphql",
  });

  const authLink = setContext((_, { headers }) => {
    return {
      headers: {
        ...headers,
        authorization: `Bearer ${process.env.GITHUB_ACCESS_TOKEN}`,
      },
    };
  });

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

我已将根组件包装在 Apollo 上下文提供程序 (pages/_app.jsx) 中:

import { ApolloProvider } from "@apollo/client";
import { getApolloClient } from "../apollo-client";

const client = getApolloClient();

function MyApp({ Component, pageProps }) {
  return (
    <ApolloProvider client={client}>
      <Component {...pageProps} />
    </ApolloProvider>
  );
}

export default MyApp;

Component.jsx 中的示例查询:

import { useQuery } from "@apollo/client";
import { gql } from "@apollo/client";

const QUERY = gql`
  query GetRepository {
    repository(owner: "facebook", name: "react") {
      id
      nameWithOwner
      description
      url
    }
  }
`;

const Component = () => {
  const { data, loading, error } = useQuery(QUERY);

  if (loading) {
    return (...);
  }

  if (error) {
    console.error(error);
    return null;
  }

  return <div>...</div>;
};

export { Component };

useQuery() 返回 “响应不成功:收到状态代码 401”

Answer 1

正如@juliomalves 所指出的，这个问题可以通过将 GITHUB_ACCESS_TOKEN 添加到 NEXT_PUBLIC_ 前缀来解决。由于我不希望 token 暴露给浏览器，可行的解决方案是通过 Next API 路由发出请求。该实现严格遵循以下链接中用于在服务器上获取数据的方法:

https://www.apollographql.com/blog/apollo-client/next-js/next-js-getting-started/

即，在/pages/api/endpoint.js 中，类似于:

import { getApolloClient } from "../apollo-client";

export default function handler(req, res) {
  const client = getApolloClient();

  try {
    const { data } = await client.query({
      query: gql`
        ...
      `,
    });
    res.status(200).json({ data });
  } catch (e) {
    res.status(400).json({ error: e.message });
  }
}

在 getApolloClient 中定义了必要的授权 header :

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

export const getApolloClient = () => {
  const httpLink = createHttpLink({
    uri: "https://api.github.com/graphql",
  });

  const authLink = setContext((_, { headers }) => {
    return {
      headers: {
        ...headers,
        authorization: `Bearer ${process.env.GITHUB_ACCESS_TOKEN}`,
      },
    };
  });

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