在React中如何发起携带请求头和认证密钥的GraphQL请求？

方案1：使用Apollo Client（推荐） #

第一步：安装依赖 #

npm install @apollo/client graphql

第二步：配置Apollo Client实例 #

新建apolloClient.js文件，配置如下：

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

const httpLink = createHttpLink({
  uri: 'https://sunny-gorilla-88.hasura.app/v1/graphql',
});

// 配置请求头拦截，自动注入认证密钥
const authLink = setContext((_, { headers }) => {
  return {
    headers: {
      ...headers,
      'x-hasura-admin-secret': 'X4Hh7kQrymAVxjnw17S6e7n0PChHGbfhV2AgjqnL50aJG5u78zvcgr0no0cSCtbt',
    }
  }
});

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

export default client;

第三步：全局注入Apollo Client #

在入口文件index.js中包裹你的应用：

import React from 'react';
import ReactDOM from 'react-dom/client';
import { ApolloProvider } from '@apollo/client';
import client from './apolloClient';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <ApolloProvider client={client}>
    <App />
  </ApolloProvider>
);

第四步：组件内发起查询示例 #

import { useQuery, gql } from '@apollo/client';

// 定义你的GraphQL查询语句
const GET_DATA = gql`
  query GetYourData {
    your_table {
      id
      name
    }
  }
`;

function MyComponent() {
  const { loading, error, data } = useQuery(GET_DATA);

  if (loading) return <p>加载中...</p>;
  if (error) return <p>查询错误: {error.message}</p>;

  return (
    <ul>
      {data.your_table.map(item => (
        <li key={item.id}>{item.name}</li>
      ))}
    </ul>
  );
}

export default MyComponent;

方案2：使用原生fetch调用（无需第三方依赖） #

直接在组件内发起请求即可：

import { useEffect, useState } from 'react';

function MyComponent() {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const res = await fetch('https://sunny-gorilla-88.hasura.app/v1/graphql', {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
            'x-hasura-admin-secret': 'X4Hh7kQrymAVxjnw17S6e7n0PChHGbfhV2AgjqnL50aJG5u78zvcgr0no0cSCtbt'
          },
          body: JSON.stringify({
            query: `
              query GetYourData {
                your_table {
                  id
                  name
                }
              }
            `
          })
        });
        const result = await res.json();
        if (result.errors) throw new Error(result.errors[0].message);
        setData(result.data);
      } catch (err) {
        setError(err.message);
      } finally {
        setLoading(false);
      }
    };

    fetchData();
  }, []);

  if (loading) return <p>加载中...</p>;
  if (error) return <p>查询错误: {error}</p>;

  return (
    <ul>
      {data.your_table.map(item => (
        <li key={item.id}>{item.name}</li>
      ))}
    </ul>
  );
}

export default MyComponent;

注意事项 #

• 上述代码中直接在前端硬编码x-hasura-admin-secret存在极高安全风险，任何人都可以通过前端代码拿到管理员密钥操作你的全量数据库，仅可用于本地开发测试。生产环境请使用后端代理转发请求，或者配置Hasura的用户角色权限体系，前端仅携带普通用户的JWT token发起请求。

内容的提问来源于stack exchange，提问作者Mert Keskin