Next.JS 上使用 Apollo-Server 的 API 路由：为什么使用 basePath 会导致错误？

Question

我在带有 Apollo-Server 的 Next.JS 应用程序上使用 API Routes，围绕 REST 端点创建 GraphQL API 包装器。但如果项目有 bathPath，我就会遇到问题。

我一直在关注这个示例，以及 youtube 上的视频教程。 我已经使用该教程中的 repo 复制了我的问题。运行该代码

$ yarn dev

并导航到 http://localhost:3000/api/graphql 后，GraphQl 游乐场就会出现，并按预期工作。

但是，如果我向项目添加基本路径，那么 graphQl 游乐场仍然在 http://localhost:300/basepath/api/graphql 上显示正常，但它给了我“无法访问服务器”的错误并显示 404 错误在开发工具的网络选项卡中。

为了添加基本路径，我创建了一个 next.config.js 并添加了

module.exports = {
   basePath: '/basepath'
}

在 pages/api/graphql.ts 中，我将路径从

/api/graphql

更新为

/basepath/api/graphql

import { ApolloServer } from "apollo-server-micro";
import { schema } from "src/schema";

const server = new ApolloServer({ schema });
const handler = server.createHandler({ path: "/somewhere/api/graphql" });

export const config = {
  api: {
    bodyParser: false,
  },
};

export default handler;

在 src/apollo.ts 中，我将 HttpLink uri 从

/api/graphql

更新为

/basepath/api/graphql

import {
  ApolloClient,
  InMemoryCache,
  NormalizedCacheObject,
} from "@apollo/client";
import { useMemo } from "react";

let apolloClient: ApolloClient<NormalizedCacheObject>;

function createIsomorphicLink() {
  if (typeof window === "undefined") {
    // server
    const { SchemaLink } = require("@apollo/client/link/schema");
    const { schema } = require("./schema");
    return new SchemaLink({ schema });
  } else {
    // client
    const { HttpLink } = require("@apollo/client/link/http");
    return new HttpLink({ uri: "/bathpath/api/graphql" });
  }
}

function createApolloClient() {
  return new ApolloClient({
    ssrMode: typeof window === "undefined",
    link: createIsomorphicLink(),
    cache: new InMemoryCache(),
  });
}

export function initializeApollo(initialState = null) {
  const _apolloClient = apolloClient ?? createApolloClient();

  if (initialState) {
    _apolloClient.cache.restore(initialState);
  }

  if (typeof window === "undefined") return _apolloClient;
  apolloClient = apolloClient ?? _apolloClient;

  return apolloClient;
}

export function useApollo(initialState) {
  const store = useMemo(() => initializeApollo(initialState), [initialState]);
  return store;
}

有什么想法为什么添加基本路径会破坏这个设置吗？我需要做什么来修复它？

这是我第一次在堆栈溢出上发帖，所以我希望我的描述足够好，请询问我是否错过了任何内容，并提前感谢您的帮助！

Answer 1

您的 apollo 变量现在将是带有基本路径的 url。如果没有它，您需要设置一个新的 apollo 变量作为环境变量。然后进入 apollo 并请求该变量而不是 BASE_URL。就我而言，该文件是 src/apollo/client.js 。你会看到类似 process.env.BASE_URL 的内容

创建 env 变量后将其更改为 process.env.APOLLO_URL，在我的例子中，我在 env.local 文件中创建了该变量。