在Apollo客户端和Next.js中向客户端请求添加授权令牌,可以按照以下步骤进行操作:
npm install apollo-boost @apollo/react-hooks graphql
ApolloClient.js
的文件,并在其中添加以下代码:import { ApolloClient, InMemoryCache, createHttpLink } from 'apollo-boost';
import { setContext } from 'apollo-link-context';
const httpLink = createHttpLink({
uri: 'https://example.com/graphql', // 替换为你的GraphQL API URL
});
const authLink = setContext((_, { headers }) => {
const token = 'your-auth-token'; // 替换为你的授权令牌
return {
headers: {
...headers,
authorization: token ? `Bearer ${token}` : '',
},
};
});
const client = new ApolloClient({
link: authLink.concat(httpLink),
cache: new InMemoryCache(),
});
export default client;
pages/index.js
,可以添加以下代码:import { ApolloProvider } from '@apollo/react-hooks';
import client from '../ApolloClient';
export default function Home() {
return (
{/* 页面内容 */}
);
}
import { useQuery } from '@apollo/react-hooks';
import { gql } from 'apollo-boost';
const GET_DATA = gql`
query GetData {
// 查询的内容
}
`;
export default function MyComponent() {
const { loading, error, data } = useQuery(GET_DATA);
if (loading) return Loading...;
if (error) return Error: {error.message};
return (
{/* 使用获取到的数据 */}
);
}
请注意,上述代码中的URL和授权令牌是示例值,你需要将它们替换为你自己的URL和授权令牌。