title: "Cannot POST /api/graphql" with Vercel Apollo Server (Serverless)
body: <p>I am trying to setup a severless Apollo server with Vercel, TypeGraphQL &amp; TypeORM (postgres).</p>
  <p>To do so, I followed a few tutorials, and all of them suggest using the <code>apollo-server-micro</code> module as it allows to expose the <code>createHandler</code> method which is great for a serverless environment.</p>
  <h2 id="code-qabt">Code</h2>
  <pre class="lang-js prettyprint-override"><code>// src/api/graphql.ts
  
  import &quot;reflect-metadata&quot;;
  import { ApolloServer } from &quot;apollo-server-micro&quot;;
  import { buildSchema } from &quot;type-graphql&quot;;
  import { createConnection, getConnectionOptions } from &quot;typeorm&quot;;
  
  import path from &quot;path&quot;;
  import { config as configEnv } from &quot;dotenv&quot;;
  import dotEnvExpand from &quot;dotenv-expand&quot;;
  
  if (process.env.NODE_ENV !== &quot;production&quot;) {
    const env = configEnv({ path: path.resolve(__dirname, &quot;../../.env.local&quot;) });
    dotEnvExpand(env);
  }
  
  async function bootstrap() {
    const connectionOptions = await getConnectionOptions();
    const connection = await createConnection(connectionOptions);
    console.log(`✅ Connected to a ${connection.options.type} database`);
  
    const schema = await buildSchema({
      resolvers: [path.join(__dirname, &quot;/resolvers/*.ts&quot;)],
    });
  
    const server = new ApolloServer({ schema });
  
    exports.handler = server.createHandler({ path: &quot;/api/graphql&quot; });
  }
  
  bootstrap();
  </code></pre>
  <pre class="lang-js prettyprint-override"><code>// src/index.tsx
  
  /* relevant imports */
  ...
  
  const client = new ApolloClient({
    link: createHttpLink({ uri: &quot;/api/graphql&quot; }),
    cache: new InMemoryCache()
  });
  
  ReactDOM.render(
    &lt;React.StrictMode&gt;
      &lt;ApolloProvider client={client}&gt;
        &lt;App /&gt;
      &lt;/ApolloProvider&gt;
    &lt;/React.StrictMode&gt;,
    document.getElementById(&quot;root&quot;)
  );
  
  ...
  </code></pre>
  <pre class="lang-js prettyprint-override"><code>/src/components/App/App.tsx
  
  /* relevant imports */
  ...
  
  export default function App(): JSX.Element {
    const initialState: IState = ...
  
    const [state, dispatch] = useReducer(...);
  
    // prevent re-rendering children when App re-renders
    const value = useMemo(() =&gt; ({ state, dispatch }), [state, dispatch]);
  
    // produced by CodeGen
    const { loading, error, data } = useUserDetailsQuery({
      variables: {
        publicKey: &quot;some public key&quot;
      }
    });
  
    return (
      &lt;React.Fragment&gt;
        &lt;GlobalStyle /&gt;
  
        &lt;Suspense fallback={&lt;Loading /&gt;}&gt;
          &lt;NavMenu /&gt;
        &lt;/Suspense&gt;
  
        {loading ? (
          &lt;p&gt;Loading ...&lt;/p&gt;
        ) : error ? (
          console.log(JSON.stringify(error, null, 2)) // &lt;========== where the error is observed
        ) : (
          console.log(JSON.stringify(data?.userDetails, null, 2))
        )}
  
        &lt;AppContext.Provider value={value}&gt;
          &lt;Router&gt;
            &lt;Suspense fallback={&lt;Loading /&gt;}&gt;
              &lt;Switch&gt;
                &lt;Redirect exact from=&quot;/&quot; to=&quot;/wallet&quot; /&gt;
                &lt;Route path=&quot;/wallet&quot; component={Wallet} /&gt;
                &lt;Route path=&quot;/mine&quot; component={Mine} /&gt;
                &lt;Route path=&quot;/blockchain&quot; component={Chain} /&gt;
                {/* &lt;Redirect from=&quot;*&quot; to=&quot;/wallet&quot; /&gt; */} // &lt;====== Doesn't seem to be the cause
              &lt;/Switch&gt;
            &lt;/Suspense&gt;
          &lt;/Router&gt;
        &lt;/AppContext.Provider&gt;
      &lt;/React.Fragment&gt;
    );
  }
  </code></pre>
  <h2 id="error-rvzc">Error</h2>
  <p>When I run <code>vercel dev</code>, I see the following</p>
  <pre class="lang-js prettyprint-override"><code>{
    &quot;graphQLErrors&quot;: [],
    &quot;networkError&quot;: {
      &quot;name&quot;: &quot;ServerParseError&quot;,
      &quot;response&quot;: {},
      &quot;statusCode&quot;: 404,
      &quot;bodyText&quot;: &quot;&lt;!DOCTYPE html&gt;\n&lt;html lang=\&quot;en\&quot;&gt;\n&lt;head&gt;\n&lt;meta charset=\&quot;utf-8\&quot;&gt;\n&lt;title&gt;Error&lt;/title&gt;\n&lt;/head&gt;\n&lt;body&gt;\n&lt;pre&gt;Cannot POST /api/graphql&lt;/pre&gt;\n&lt;/body&gt;\n&lt;/html&gt;\n&quot;
    },
    &quot;message&quot;: &quot;Unexpected token &lt; in JSON at position 0&quot;
  }
  </code></pre>
  <p>I also see: <code>POST http://localhost:3000/api/graphql 404 (Not Found)</code> at <code>createHttpLink.ts:145</code></p>
  <h2 id="question-lja5">Question</h2>
  <p>What am I missing here?
  My database connection works fine as I checked it locally before trying with <code>vercel dev</code>.
  I also added the env variables to vercel (production, preview, and development branches).</p>