Next.js集成Fauna DB与Apollo时遇GraphQL 404错误求助

我正尝试通过Apollo让Fauna DB与Next.js协同工作，但始终受阻。近期出现的错误为：POST http://localhost:3000/graphql 404。以下是我的Apollo客户端代码片段：

import {
    ApolloClient,
    InMemoryCache,
    createHttpLink,
} from '@apollo/client';
import { setContext } from '@apollo/client/link/context';
  
const httpLink = createHttpLink({
    uri: process.env.FAUNADB_GRAPHQL_URL,
});
  
const authLink = setContext((_, { headers }) => { 
    const faunaKey = process.env.FAUNA_ADMIN_KEY;
    return {
      headers: { 
        ...headers,
        authorization: `Bearer ${faunaKey}`,
      }
    }
});
  
export const client = new ApolloClient({
    link: authLink.concat(httpLink),
    cache: new InMemoryCache(),
});

我曾尝试更换其他方案但仍无进展，也查找过教程（如Next.js的with-fauna示例）但大多已过时，无法解决问题。

核心问题分析 #

出现POST http://localhost:3000/graphql 404的原因是Apollo客户端未正确读取到Fauna的GraphQL地址，默认请求了本地的/graphql端点，而你的Next.js项目并未配置该本地GraphQL服务。导致环境变量读取失败的常见原因是客户端组件中未使用带NEXT_PUBLIC_前缀的环境变量。

Next.js规则：仅服务端代码可直接使用无前缀的环境变量；若Apollo客户端代码在客户端组件（页面、客户端组件文件）中引入，环境变量必须以NEXT_PUBLIC_开头，否则客户端无法获取变量值，createHttpLink的uri参数会默认设为/graphql。

解决步骤 #

• 修改环境变量命名
  在.env.local文件中，将环境变量名改为带NEXT_PUBLIC_前缀的格式：

  NEXT_PUBLIC_FAUNADB_GRAPHQL_URL=你的Fauna GraphQL端点
  NEXT_PUBLIC_FAUNA_ADMIN_KEY=你的Fauna管理员密钥
  

• 更新Apollo客户端代码
  同步替换代码中的环境变量名：

  import {
      ApolloClient,
      InMemoryCache,
      createHttpLink,
  } from '@apollo/client';
  import { setContext } from '@apollo/client/link/context';
    
  const httpLink = createHttpLink({
      uri: process.env.NEXT_PUBLIC_FAUNADB_GRAPHQL_URL,
  });
    
  const authLink = setContext((_, { headers }) => { 
      const faunaKey = process.env.NEXT_PUBLIC_FAUNA_ADMIN_KEY;
      return {
        headers: { 
          ...headers,
          authorization: `Bearer ${faunaKey}`,
        }
      }
  });
    
  export const client = new ApolloClient({
      link: authLink.concat(httpLink),
      cache: new InMemoryCache(),
  });
  

• 重启Next.js开发服务器
  环境变量修改后必须重启服务器，否则新变量不会生效。

额外注意事项 #

• 若在服务端组件或API路由中使用Apollo客户端，无需添加NEXT_PUBLIC_前缀，但要通过console.log(process.env.FAUNADB_GRAPHQL_URL)在服务端代码中验证变量是否加载成功。
• 不要在客户端代码中暴露Fauna管理员密钥！若Apollo客户端用于客户端组件，建议改用Fauna的客户端密钥（Client Key），可在Fauna控制台「Security」页面创建并限制权限。

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