将(graphql + nextJs)部署到heroku

时间:2020-09-02 19:45:23

标签: heroku deployment graphql next.js vercel

我正在使用(后端上的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"
  }

0 个答案:

没有答案