<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> I have searched the <a href="https://github.com/zeit/next.js/issues">issues</a> of this repository and believe that this is not a duplicate.</li>
</ul>
<p dir="auto">I'am currently switching my existing app  to next.js , everything seems to work correctly except my api end point (running on port:4000), which i can't proxy from my next.js app. I followed the examples in the repo but i can't make it work, In production i use nginx as reverse proxy with no problem , but i'am in dev mode . For setting up Apollo with Redux i followed this example :<a href="https://github.com/zeit/next.js/tree/master/examples/with-apollo-and-redux">with-apollo-and-redux</a> and for proxy i used this example <a href="https://github.com/zeit/next.js/tree/master/examples/with-custom-reverse-proxy">with-custom-reverse-proxy</a></p>
<h2 dir="auto">Expected Behavior</h2>
<p dir="auto">Get a response from my api end point</p>
<h2 dir="auto">code</h2>
<p dir="auto"><code class="notranslate">in initApollo.js</code></p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="import { ApolloClient, createNetworkInterface } from &quot;react-apollo&quot;;
import fetch from &quot;isomorphic-fetch&quot;;

let apolloClient = null;

if (!process.browser) {
  global.fetch = fetch;
}

function create() {
  return new ApolloClient({
    ssrMode: !process.browser,
    networkInterface: createNetworkInterface({
      uri: &quot;/api&quot; 
    })
  });
}

export default function initApollo() {
  if (!process.browser) {
    return create();
  }

  if (!apolloClient) {
    apolloClient = create();
  }

  return apolloClient;
}
"><pre class="notranslate"><span class="pl-k">import</span> <span class="pl-kos">{</span> <span class="pl-v">ApolloClient</span><span class="pl-kos">,</span> <span class="pl-s1">createNetworkInterface</span> <span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">"react-apollo"</span><span class="pl-kos">;</span>
<span class="pl-k">import</span> <span class="pl-s1">fetch</span> <span class="pl-k">from</span> <span class="pl-s">"isomorphic-fetch"</span><span class="pl-kos">;</span>

<span class="pl-k">let</span> <span class="pl-s1">apolloClient</span> <span class="pl-c1">=</span> <span class="pl-c1">null</span><span class="pl-kos">;</span>

<span class="pl-k">if</span> <span class="pl-kos">(</span><span class="pl-c1">!</span><span class="pl-s1">process</span><span class="pl-kos">.</span><span class="pl-c1">browser</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
  <span class="pl-s1">global</span><span class="pl-kos">.</span><span class="pl-c1">fetch</span> <span class="pl-c1">=</span> <span class="pl-s1">fetch</span><span class="pl-kos">;</span>
<span class="pl-kos">}</span>

<span class="pl-k">function</span> <span class="pl-en">create</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
  <span class="pl-k">return</span> <span class="pl-k">new</span> <span class="pl-v">ApolloClient</span><span class="pl-kos">(</span><span class="pl-kos">{</span>
    <span class="pl-c1">ssrMode</span>: <span class="pl-c1">!</span><span class="pl-s1">process</span><span class="pl-kos">.</span><span class="pl-c1">browser</span><span class="pl-kos">,</span>
    <span class="pl-c1">networkInterface</span>: <span class="pl-en">createNetworkInterface</span><span class="pl-kos">(</span><span class="pl-kos">{</span>
      <span class="pl-c1">uri</span>: <span class="pl-s">"/api"</span> 
    <span class="pl-kos">}</span><span class="pl-kos">)</span>
  <span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-kos">}</span>

<span class="pl-k">export</span> <span class="pl-k">default</span> <span class="pl-k">function</span> <span class="pl-en">initApollo</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
  <span class="pl-k">if</span> <span class="pl-kos">(</span><span class="pl-c1">!</span><span class="pl-s1">process</span><span class="pl-kos">.</span><span class="pl-c1">browser</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
    <span class="pl-k">return</span> <span class="pl-en">create</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
  <span class="pl-kos">}</span>

  <span class="pl-k">if</span> <span class="pl-kos">(</span><span class="pl-c1">!</span><span class="pl-s1">apolloClient</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
    <span class="pl-s1">apolloClient</span> <span class="pl-c1">=</span> <span class="pl-en">create</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
  <span class="pl-kos">}</span>

  <span class="pl-k">return</span> <span class="pl-s1">apolloClient</span><span class="pl-kos">;</span>
<span class="pl-kos">}</span></pre></div>
<p dir="auto">and in <code class="notranslate">server.js</code></p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="const express = require(&quot;express&quot;);
const next = require(&quot;next&quot;);

const dev = process.env.NODE_ENV !== &quot;production&quot;;
const app = next({ dev });
const handle = app.getRequestHandler();
// const httpProxy = require('http-proxy');
// const apiProxy = httpProxy.createProxyServer();
// const apiServer = 'http://localhost:4000',

const devProxy = {
  &quot;/api&quot;: {
    target: &quot;http://localhost:4000/api/&quot;,
    changeOrigin: true
  }
};

app
  .prepare()
  .then(() =&gt; {
    const server = express();

    if (dev &amp;&amp; devProxy) {
      const proxyMiddleware = require(&quot;http-proxy-middleware&quot;);
      Object.keys(devProxy).forEach(function(context) {
        server.use(proxyMiddleware(context, devProxy[context]));
      });
    }

    server.all(&quot;*&quot;, (req, res) =&gt; handle(req, res));

    server.listen(3000, err =&gt; {
      if (err) throw err;
      console.log(&quot;&gt; Ready on http://localhost:3000&quot;);
    });
  })
  .catch(ex =&gt; {
    console.error(ex.stack);
    process.exit(1);
  });
"><pre class="notranslate"><span class="pl-k">const</span> <span class="pl-s1">express</span> <span class="pl-c1">=</span> <span class="pl-en">require</span><span class="pl-kos">(</span><span class="pl-s">"express"</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-k">const</span> <span class="pl-s1">next</span> <span class="pl-c1">=</span> <span class="pl-en">require</span><span class="pl-kos">(</span><span class="pl-s">"next"</span><span class="pl-kos">)</span><span class="pl-kos">;</span>

<span class="pl-k">const</span> <span class="pl-s1">dev</span> <span class="pl-c1">=</span> <span class="pl-s1">process</span><span class="pl-kos">.</span><span class="pl-c1">env</span><span class="pl-kos">.</span><span class="pl-c1">NODE_ENV</span> <span class="pl-c1">!==</span> <span class="pl-s">"production"</span><span class="pl-kos">;</span>
<span class="pl-k">const</span> <span class="pl-s1">app</span> <span class="pl-c1">=</span> <span class="pl-s1">next</span><span class="pl-kos">(</span><span class="pl-kos">{</span> dev <span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-k">const</span> <span class="pl-s1">handle</span> <span class="pl-c1">=</span> <span class="pl-s1">app</span><span class="pl-kos">.</span><span class="pl-en">getRequestHandler</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-c">// const httpProxy = require('http-proxy');</span>
<span class="pl-c">// const apiProxy = httpProxy.createProxyServer();</span>
<span class="pl-c">// const apiServer = 'http://localhost:4000',</span>

<span class="pl-k">const</span> <span class="pl-s1">devProxy</span> <span class="pl-c1">=</span> <span class="pl-kos">{</span>
  <span class="pl-s">"/api"</span>: <span class="pl-kos">{</span>
    <span class="pl-c1">target</span>: <span class="pl-s">"http://localhost:4000/api/"</span><span class="pl-kos">,</span>
    <span class="pl-c1">changeOrigin</span>: <span class="pl-c1">true</span>
  <span class="pl-kos">}</span>
<span class="pl-kos">}</span><span class="pl-kos">;</span>

<span class="pl-s1">app</span>
  <span class="pl-kos">.</span><span class="pl-en">prepare</span><span class="pl-kos">(</span><span class="pl-kos">)</span>
  <span class="pl-kos">.</span><span class="pl-en">then</span><span class="pl-kos">(</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">{</span>
    <span class="pl-k">const</span> <span class="pl-s1">server</span> <span class="pl-c1">=</span> <span class="pl-s1">express</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">;</span>

    <span class="pl-k">if</span> <span class="pl-kos">(</span><span class="pl-s1">dev</span> <span class="pl-c1">&amp;&amp;</span> <span class="pl-s1">devProxy</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
      <span class="pl-k">const</span> <span class="pl-s1">proxyMiddleware</span> <span class="pl-c1">=</span> <span class="pl-en">require</span><span class="pl-kos">(</span><span class="pl-s">"http-proxy-middleware"</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
      <span class="pl-v">Object</span><span class="pl-kos">.</span><span class="pl-en">keys</span><span class="pl-kos">(</span><span class="pl-s1">devProxy</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-en">forEach</span><span class="pl-kos">(</span><span class="pl-k">function</span><span class="pl-kos">(</span><span class="pl-s1">context</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
        <span class="pl-s1">server</span><span class="pl-kos">.</span><span class="pl-en">use</span><span class="pl-kos">(</span><span class="pl-s1">proxyMiddleware</span><span class="pl-kos">(</span><span class="pl-s1">context</span><span class="pl-kos">,</span> <span class="pl-s1">devProxy</span><span class="pl-kos">[</span><span class="pl-s1">context</span><span class="pl-kos">]</span><span class="pl-kos">)</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
      <span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
    <span class="pl-kos">}</span>

    <span class="pl-s1">server</span><span class="pl-kos">.</span><span class="pl-en">all</span><span class="pl-kos">(</span><span class="pl-s">"*"</span><span class="pl-kos">,</span> <span class="pl-kos">(</span><span class="pl-s1">req</span><span class="pl-kos">,</span> <span class="pl-s1">res</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-s1">handle</span><span class="pl-kos">(</span><span class="pl-s1">req</span><span class="pl-kos">,</span> <span class="pl-s1">res</span><span class="pl-kos">)</span><span class="pl-kos">)</span><span class="pl-kos">;</span>

    <span class="pl-s1">server</span><span class="pl-kos">.</span><span class="pl-en">listen</span><span class="pl-kos">(</span><span class="pl-c1">3000</span><span class="pl-kos">,</span> <span class="pl-s1">err</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">{</span>
      <span class="pl-k">if</span> <span class="pl-kos">(</span><span class="pl-s1">err</span><span class="pl-kos">)</span> <span class="pl-k">throw</span> <span class="pl-s1">err</span><span class="pl-kos">;</span>
      <span class="pl-smi">console</span><span class="pl-kos">.</span><span class="pl-en">log</span><span class="pl-kos">(</span><span class="pl-s">"&gt; Ready on http://localhost:3000"</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
    <span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
  <span class="pl-kos">}</span><span class="pl-kos">)</span>
  <span class="pl-kos">.</span><span class="pl-en">catch</span><span class="pl-kos">(</span><span class="pl-s1">ex</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">{</span>
    <span class="pl-smi">console</span><span class="pl-kos">.</span><span class="pl-en">error</span><span class="pl-kos">(</span><span class="pl-s1">ex</span><span class="pl-kos">.</span><span class="pl-c1">stack</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
    <span class="pl-s1">process</span><span class="pl-kos">.</span><span class="pl-en">exit</span><span class="pl-kos">(</span><span class="pl-c1">1</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
  <span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div>
<h2 dir="auto">Current Behavior</h2>
<p dir="auto"><strong>POST <a href="http://localhost:3000/api" rel="nofollow">http://localhost:3000/api</a> 501 (Not Implemented)</strong></p>
<h2 dir="auto">Your Environment</h2>

<table role="table">
<thead>
<tr>
<th>Tech</th>
<th>Version</th>
</tr>
</thead>
<tbody>
<tr>
<td>next</td>
<td>3</td>
</tr>
<tr>
<td>node</td>
<td>8</td>
</tr>
<tr>
<td>OS</td>
<td>osx</td>
</tr>
<tr>
<td>browser</td>
<td>chrome</td>
</tr>
<tr>
<td>etc</td>
<td></td>
</tr>
</tbody>
</table>
<h1 dir="auto">Bug report</h1>
<h2 dir="auto">Describe the bug</h2>
<p dir="auto">Loving v9! Just ran into an issue where I can’t use an existing database connection with the new API routes.</p>
<h2 dir="auto">To Reproduce</h2>
<p dir="auto"><code class="notranslate">mongooseConnect.js</code>:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="const mongoose = require(&quot;mongoose&quot;).set(&quot;debug&quot;, true);
const connection = {};

module.exports = async () =&gt; {
  if (connection.isConnected) {
    // Using existing database connection
    return;
  }

  // Using new database connection
  const db = await mongoose.connect(&quot;mongodb://localhost:27017/my-app&quot;,
    { useCreateIndex: true, useFindAndModify: false, useNewUrlParser: true }
  );

  connection.isConnected = db.connections[0].readyState;
};"><pre class="notranslate"><span class="pl-k">const</span> <span class="pl-s1">mongoose</span> <span class="pl-c1">=</span> <span class="pl-en">require</span><span class="pl-kos">(</span><span class="pl-s">"mongoose"</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-en">set</span><span class="pl-kos">(</span><span class="pl-s">"debug"</span><span class="pl-kos">,</span> <span class="pl-c1">true</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-k">const</span> <span class="pl-s1">connection</span> <span class="pl-c1">=</span> <span class="pl-kos">{</span><span class="pl-kos">}</span><span class="pl-kos">;</span>

<span class="pl-smi">module</span><span class="pl-kos">.</span><span class="pl-en">exports</span> <span class="pl-c1">=</span> <span class="pl-k">async</span> <span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">{</span>
  <span class="pl-k">if</span> <span class="pl-kos">(</span><span class="pl-s1">connection</span><span class="pl-kos">.</span><span class="pl-c1">isConnected</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
    <span class="pl-c">// Using existing database connection</span>
    <span class="pl-k">return</span><span class="pl-kos">;</span>
  <span class="pl-kos">}</span>

  <span class="pl-c">// Using new database connection</span>
  <span class="pl-k">const</span> <span class="pl-s1">db</span> <span class="pl-c1">=</span> <span class="pl-k">await</span> <span class="pl-s1">mongoose</span><span class="pl-kos">.</span><span class="pl-en">connect</span><span class="pl-kos">(</span><span class="pl-s">"mongodb://localhost:27017/my-app"</span><span class="pl-kos">,</span>
    <span class="pl-kos">{</span> <span class="pl-c1">useCreateIndex</span>: <span class="pl-c1">true</span><span class="pl-kos">,</span> <span class="pl-c1">useFindAndModify</span>: <span class="pl-c1">false</span><span class="pl-kos">,</span> <span class="pl-c1">useNewUrlParser</span>: <span class="pl-c1">true</span> <span class="pl-kos">}</span>
  <span class="pl-kos">)</span><span class="pl-kos">;</span>

  <span class="pl-s1">connection</span><span class="pl-kos">.</span><span class="pl-c1">isConnected</span> <span class="pl-c1">=</span> <span class="pl-s1">db</span><span class="pl-kos">.</span><span class="pl-c1">connections</span><span class="pl-kos">[</span><span class="pl-c1">0</span><span class="pl-kos">]</span><span class="pl-kos">.</span><span class="pl-c1">readyState</span><span class="pl-kos">;</span>
<span class="pl-kos">}</span><span class="pl-kos">;</span></pre></div>
<ol dir="auto">
<li>Require the above function into an API endpoint that uses the new <code class="notranslate">pages/api/</code> feature and requires</li>
<li>Run <code class="notranslate">next dev</code></li>
<li>Ping the API endpoint and see the correct response</li>
<li>Edit <code class="notranslate">mongooseConnect.js</code> and save</li>
<li>Ping the API endpoint again</li>
</ol>
<h2 dir="auto">Expected behavior</h2>
<p dir="auto">The response will be the same. Instead, I get the following error:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="MongooseError: You can not `mongoose.connect()` multiple times while connected."><pre class="notranslate"><code class="notranslate">MongooseError: You can not `mongoose.connect()` multiple times while connected.
</code></pre></div>
<p dir="auto">This is because <code class="notranslate">db</code> returns to <code class="notranslate">{}</code> with the HMR.</p>
<h2 dir="auto">System information</h2>
<ul dir="auto">
<li>OS: macOS</li>
<li>Version of Next.js: 9.0.0</li>
</ul>
<h2 dir="auto">Additional context</h2>
<p dir="auto">Is there a different way we should be handling serverless database connections or is this a bug?</p>