将graphql + nextJs部署到heroku

编程问答 2022-08-12

问题描述

我正在使用（后端上的graphql-yoga）（前端上的nextjs和apollo客户端）构建打字稿mern堆栈应用程序 我一直在尝试将其部署到heroku和vercel，但都给出了错误

idk我所缺少的，我已经尝试了许多方法，但是仍然无法正常工作

如果您更容易在此处阅读代码，https://github.com/hamohuh/social-app 

    // Server connection options
    const options = {
      port: process.env.PORT || 5000,endpoint: "/graphql",subscriptions: "/subscriptions",playground: "/graphql",cors: {
        credentials: true,origin:
          process.env.NODE_ENV === "production"
            ? ["https://yarab-yshtaghal.herokuapp.com"]
            : ["http://localhost:3000"] // your frontend url.
      }
    };

// starting the server on port 5000
server.start(options,() => {
  console.log(`Server is running on http://localhost:${options.port}`);
});

客户端

// apollo client configurations
// http link
const httpLink = createUploadLink({
  uri:
    process.env.NODE_ENV == "production"
      ? "https://yarab-yshtaghal.herokuapp.com/graphql"
      : "http://localhost:5000/graphql",// Server URL (must be absolute)
  credentials: "include",// Additional fetch() options like `credentials` or `headers`
  fetch
});

// websocket link
const wsLink = process.browser
  ? new WebSocketLink({
      uri: `ws://localhost:5000/subscriptions`,options: { reconnect: true }
    })
  : null;

// splitLink decides which link to use
const splitLink = process.browser
  ? split(
      ({ query }) => {
        const deFinition = getMainDeFinition(query);
        return (
          deFinition.kind === "OperationDeFinition" &&
          deFinition.operation === "subscription"
        );
      },wsLink,httpLink as any
    )
  : httpLink;

// will user `setContext` to send the token with every request
const authLink = setContext((_,{ headers }) => {
  // get the authentication token from protected route context
  if (typeof window !== "undefined") {
    token = Cookies.get("token");
  }
  if (headers) {
    token = headers.token;
  }

  // return the headers to the context so httpLink can read them
  return {
    headers: {
      ...headers,token: token ? token : ""
    }
  };
});

// create an apollo client
function createApolloClient() {
  return new ApolloClient({
    uri: "/graphql",ssrMode: !isbrowser,link: authLink.concat(splitLink as any),cache: new InMemoryCache()
  });
}

脚本

server package.json scripts
    "scripts": {
        "client-install": "npm install --prefix client","start": "ts-node -r esm server/index.ts","server": "nodemon -r esm server/index.ts","client": "npm run dev --prefix client","dev": "concurrently \"npm run server\" \"npm run client\""
      }

next package.json scripts
"scripts": {
    "dev": "next dev","build": "next build","start": "next start"
  }

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

deploymentgraphqlherokuherokuvercel