我正在尝试使用 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”
最佳答案
正如@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(),
});
};
关于reactjs - 在进行客户端查询时,我应该如何为 Github graphql API 提供身份验证?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/72923283/
相关文章:
scrapy - 如何在 scrapy Shell 中使用 scrapy 中间件?
algorithm - 计算具有整数边和给定斜边的直角三角形
javascript - react-animarker 突出显示不随状态更改而更新
sql - 使用存储库模式时如何在 Go 中处理数据库连接?
c++ - 参数的值类别在重载决策(或更一般的函数调用处理)的哪一部分中发挥作用?
python - 名称错误 : name 'scipy' is not defined when t
c++ - 为什么 std::shared_ptr 控制 block 需要持有指向具有正确类型的托管
python - 在没有docker的情况下运行正常时拒绝使用docker连接本地ip地址