<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>
<h2 dir="auto">In short</h2>
<p dir="auto">Using with-apollo with <code class="notranslate">url</code> or <code class="notranslate">query</code> params in pages leads to strange behaviour.</p>
<h2 dir="auto">What works:</h2>
<p dir="auto">I extended the <code class="notranslate">index.js</code> in the <em>with-apollo</em>-example, just to print the current query:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="export default withData(props =&gt; (
  &lt;Main&gt;
    {(props.url) &amp;&amp; console.log(props.url.query)} // THIS WILL BECOME IMPORTANT!
    &lt;Header /&gt;
    &lt;Submit /&gt;
    &lt;PostList /&gt;
  &lt;/Main&gt;
))"><pre class="notranslate"><span class="pl-k">export</span> <span class="pl-k">default</span> <span class="pl-en">withData</span><span class="pl-kos">(</span><span class="pl-s1">props</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">(</span>
  <span class="pl-c1">&lt;</span><span class="pl-ent">Main</span><span class="pl-c1">&gt;</span>
    <span class="pl-kos">{</span><span class="pl-kos">(</span><span class="pl-s1">props</span><span class="pl-kos">.</span><span class="pl-c1">url</span><span class="pl-kos">)</span> <span class="pl-c1">&amp;&amp;</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-s1">props</span><span class="pl-kos">.</span><span class="pl-c1">url</span><span class="pl-kos">.</span><span class="pl-c1">query</span><span class="pl-kos">)</span><span class="pl-kos">}</span> // THIS WILL BECOME IMPORTANT!
    <span class="pl-c1">&lt;</span><span class="pl-ent">Header</span> <span class="pl-c1">/</span><span class="pl-c1">&gt;</span>
    <span class="pl-c1">&lt;</span><span class="pl-ent">Submit</span> <span class="pl-c1">/</span><span class="pl-c1">&gt;</span>
    <span class="pl-c1">&lt;</span><span class="pl-ent">PostList</span> <span class="pl-c1">/</span><span class="pl-c1">&gt;</span>
  <span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">Main</span><span class="pl-c1">&gt;</span>
<span class="pl-kos">)</span><span class="pl-kos">)</span></pre></div>
<p dir="auto">The apollo data (the posts) are fetched correctly <strong>on the server</strong> and on the client i get them baked into <code class="notranslate">__NEXT_DATA__ as </code>apollo store`.</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="  __NEXT_DATA__ = {&quot;props&quot;:{&quot;serverState&quot;:{&quot;apollo&quot;:{&quot;data&quot;:{&quot;Post:cjcq65k4ua4h801287p9h0rw9&quot;:{&quot;id&quot;:&quot;cjcq65k4ua4h801287p9h0rw9&quot;,&quot;titl"><pre class="notranslate">  <span class="pl-c1">__NEXT_DATA__</span> <span class="pl-c1">=</span> <span class="pl-kos">{</span><span class="pl-s">"props"</span>:<span class="pl-kos">{</span><span class="pl-s">"serverState"</span>:<span class="pl-kos">{</span><span class="pl-s">"apollo"</span>:<span class="pl-kos">{</span><span class="pl-s">"data"</span>:<span class="pl-kos">{</span><span class="pl-s">"Post:cjcq65k4ua4h801287p9h0rw9"</span>:<span class="pl-kos">{</span><span class="pl-s">"id"</span>:<span class="pl-s">"cjcq65k4ua4h801287p9h0rw9"</span><span class="pl-kos">,</span>"titl</pre></div>
<h2 dir="auto">What does not work:</h2>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="export default withData(props =&gt; (
  &lt;Main&gt;
    {console.log(props.url.query)} // JUST A MINOR CHANGE..?
    &lt;Header /&gt;
    &lt;Submit /&gt;
    &lt;PostList /&gt;
  &lt;/Main&gt;
))"><pre class="notranslate"><span class="pl-k">export</span> <span class="pl-k">default</span> <span class="pl-en">withData</span><span class="pl-kos">(</span><span class="pl-s1">props</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">(</span>
  <span class="pl-c1">&lt;</span><span class="pl-ent">Main</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">log</span><span class="pl-kos">(</span><span class="pl-s1">props</span><span class="pl-kos">.</span><span class="pl-c1">url</span><span class="pl-kos">.</span><span class="pl-c1">query</span><span class="pl-kos">)</span><span class="pl-kos">}</span> // JUST A MINOR CHANGE..?
    <span class="pl-c1">&lt;</span><span class="pl-ent">Header</span> <span class="pl-c1">/</span><span class="pl-c1">&gt;</span>
    <span class="pl-c1">&lt;</span><span class="pl-ent">Submit</span> <span class="pl-c1">/</span><span class="pl-c1">&gt;</span>
    <span class="pl-c1">&lt;</span><span class="pl-ent">PostList</span> <span class="pl-c1">/</span><span class="pl-c1">&gt;</span>
  <span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">Main</span><span class="pl-c1">&gt;</span>
<span class="pl-kos">)</span><span class="pl-kos">)</span></pre></div>
<p dir="auto">Now on the client the apollo store is <strong>empty</strong> and data gets fetched <strong>on the client</strong>:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="__NEXT_DATA__ = {&quot;props&quot;:{&quot;serverState&quot;:{&quot;apollo&quot;:{&quot;data&quot;:{}}}},"><pre class="notranslate"><span class="pl-c1">__NEXT_DATA__</span> <span class="pl-c1">=</span> <span class="pl-kos">{</span><span class="pl-s">"props"</span>:<span class="pl-kos">{</span><span class="pl-s">"serverState"</span>:<span class="pl-kos">{</span><span class="pl-s">"apollo"</span>:<span class="pl-kos">{</span><span class="pl-s">"data"</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></pre></div>
<h2 dir="auto">Steps to Reproduce (for bugs)</h2>
<ol dir="auto">
<li>Get an Apollo next repo like <a href="https://github.com/ads1018/next-apollo-example">https://github.com/ads1018/next-apollo-example</a></li>
<li><code class="notranslate">console.log()</code> the query like above</li>
<li>See loading state on client</li>
</ol>
<h2 dir="auto">What am i trying to accomplish?</h2>
<p dir="auto">I want to <strong>export a static</strong> app with routes like:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="/posts/My-first-post
/posts/My-other-post"><pre class="notranslate"><code class="notranslate">/posts/My-first-post
/posts/My-other-post
</code></pre></div>
<p dir="auto">where posts are known at compile time. For that i fetch all post ids at export-time/compile-time in <code class="notranslate">next.config.js</code>  and map them to pages with variables, in the <code class="notranslate">exportPathMap</code>-function, like this:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="// ...
routes[`/posts/${slug(post.title)}`] = {page: '/posts', query: {post_id: post.id}}
// ...
return routes"><pre class="notranslate"><span class="pl-c">// ...</span>
<span class="pl-s1">routes</span><span class="pl-kos">[</span><span class="pl-s">`/posts/<span class="pl-s1"><span class="pl-kos">${</span><span class="pl-en">slug</span><span class="pl-kos">(</span><span class="pl-s1">post</span><span class="pl-kos">.</span><span class="pl-c1">title</span><span class="pl-kos">)</span><span class="pl-kos">}</span></span>`</span><span class="pl-kos">]</span> <span class="pl-c1">=</span> <span class="pl-kos">{</span><span class="pl-c1">page</span>: <span class="pl-s">'/posts'</span><span class="pl-kos">,</span> <span class="pl-c1">query</span>: <span class="pl-kos">{</span><span class="pl-c1">post_id</span>: <span class="pl-s1">post</span><span class="pl-kos">.</span><span class="pl-c1">id</span><span class="pl-kos">}</span><span class="pl-kos">}</span>
<span class="pl-c">// ...</span>
<span class="pl-k">return</span> <span class="pl-s1">routes</span></pre></div>
<p dir="auto">I use graphql wrappers and use the query parameter to fetch the actual data, and the <code class="notranslate">next-apollo</code> package to get the data in <code class="notranslate">getInitialProps</code>:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="graphql(
 PostDataQuery,
  {
    options: ({url}) =&gt; {
        return {variables: {id: url.query.post_id}}
  }
)(MyPostComponent)"><pre class="notranslate"><span class="pl-en">graphql</span><span class="pl-kos">(</span>
 <span class="pl-v">PostDataQuery</span><span class="pl-kos">,</span>
  <span class="pl-kos">{</span>
    <span class="pl-en">options</span>: <span class="pl-kos">(</span><span class="pl-kos">{</span>url<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">return</span> <span class="pl-kos">{</span><span class="pl-c1">variables</span>: <span class="pl-kos">{</span><span class="pl-c1">id</span>: <span class="pl-s1">url</span><span class="pl-kos">.</span><span class="pl-c1">query</span><span class="pl-kos">.</span><span class="pl-c1">post_id</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-v">MyPostComponent</span><span class="pl-kos">)</span></pre></div>
<p dir="auto">But as described above, the data i loaded on the client and not on the server if <strong>i use query parameters</strong>, and the apollo store is not created or not sent to the client.</p>
<p dir="auto">For example this works:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="// ... 
        return {variables: {id: 'some-hard-coded-id'}}
// ..."><pre class="notranslate"><span class="pl-c">// ... </span>
        <span class="pl-k">return</span> <span class="pl-kos">{</span><span class="pl-c1">variables</span>: <span class="pl-kos">{</span><span class="pl-c1">id</span>: <span class="pl-s">'some-hard-coded-id'</span><span class="pl-kos">}</span><span class="pl-kos">}</span>
<span class="pl-c">// ...</span></pre></div>
<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>v4.2.3</td>
</tr>
<tr>
<td>node</td>
<td>v9.2.0</td>
</tr>
<tr>
<td>OS</td>
<td>MacOS</td>
</tr>
<tr>
<td>browser</td>
<td>Chrome</td>
</tr>
<tr>
<td>etc</td>
<td></td>
</tr>
</tbody>
</table>
<p dir="auto">First off, thanks for the with-react-intl example! It was very helpful for me in setting up localization in my app.</p>
<p dir="auto">Currently, the example uses a custom script to generate a JSON of the default messages at <code class="notranslate">lang/en.json</code>. The README explains that you can send this file to your translator for translation.</p>
<p dir="auto">The react-intl-translations-manager library already does something very similar: it generates JSON files of the default messages for the languages that you specify. It's a bit nicer, though, because it's easily configurable, outputs useful command line messages, and most importantly will insert missing messages into the lang/locale.json files.</p>
<p dir="auto">Maybe it would be better to replace the default-lang script with react-intl-translations-manager? If so, I'll submit a pull request with this change.</p>