title: Accessing consumed React.Context in Next.js getInitialProps using HOC
body: <p>I am attempting to abstract my API calls by using a simple service that provides a very simple method, which is just an HTTP call. I store this implementation in a React Context, and use its provider inside my <code>_app.js</code>, so that the API is globally available, but I have a problem at actually consuming the context in my pages.</p>
  
  <p><strong>pages/_app.js</strong></p>
  
  <pre><code>import React from 'react'
  import App, { Container } from 'next/app'
  
  import ApiProvider from '../Providers/ApiProvider';
  
  import getConfig from 'next/config'
  const { serverRuntimeConfig, publicRuntimeConfig } = getConfig()
  
  export default class Webshop extends App 
  {
      static async getInitialProps({ Component, router, ctx }) {
          let pageProps = {}
  
          if (Component.getInitialProps) {
              pageProps = await Component.getInitialProps(ctx)
          }
  
          return { pageProps }
      }
  
      render () {
          const { Component, pageProps } = this.props
  
          return (
              &lt;Container&gt;
                  &lt;ApiProvider endpoint={publicRuntimeConfig.api_endpoint}&gt;
                      &lt;Component {...pageProps} /&gt;
                  &lt;/ApiProvider&gt;
              &lt;/Container&gt;
          );
      }
  }
  </code></pre>
  
  <p><strong>Services/Api.js</strong></p>
  
  <pre><code>import fetch from 'unfetch'
  
  function Api (config)
  {
      const apiUrl = config.endpoint;
  
      async function request (url) {
          return fetch(apiUrl + '/' + url);
      };
  
      this.decode = async function (code) {
          const res = request('/decode?code=' + code);
          const json = await res.json();
          return json;
      }
  
      return this;
  }
  
  export default Api;
  </code></pre>
  
  <p><strong>Providers/ApiProvider.js</strong></p>
  
  <pre><code>import React, { Component } from 'react';
  import Api from '../Services/Api';
  
  const defaultStore = null;
  
  class ApiProvider extends React.Component
  {
      state = {
          api: null
      };
  
      constructor (props) {
          super(props);
  
          this.state.api = new Api({ endpoint: props.endpoint });
      }
  
      render () {
          return (
              &lt;ApiContext.Provider value={this.state.api}&gt;
                  {this.props.children}
              &lt;/ApiContext.Provider&gt;
          );
      }
  }
  
  export const ApiContext = React.createContext(defaultStore);
  export default ApiProvider;
  export const ApiConsumer = ApiContext.Consumer;
  export function withApi(Component) {
      return function withApiHoc(props) {
          return (
              &lt;ApiConsumer&gt;{ context =&gt; &lt;Component {...props} api={context} /&gt; }&lt;/ApiConsumer&gt;
          )
      }
  };
  </code></pre>
  
  <p><strong>pages/code.js</strong></p>
  
  <pre><code>import React, { Component } from 'react';
  import Link from 'next/link';
  import { withApi } from '../Providers/ApiProvider';
  
  class Code extends React.Component
  {
      static async getInitialProps ({ query, ctx }) {
          const decodedResponse = this.props.api.decode(query.code); // Cannot read property 'api' of undefined
  
          return {
              code: query.code,
              decoded: decodedResponse
          };
      }
  
      render () {
          return (
              &lt;div&gt;
                  [...]
              &lt;/div&gt;
          );
      }
  }
  
  let hocCode = withApi(Code);
  hocCode.getInitialProps = Code.getInitialProps;
  export default hocCode;
  </code></pre>
  
  <p>The problem is that I am unable to access the consumed context. I could just make a direct <code>fetch</code> call within my <code>getInitialProps</code>, however I wanted to abstract it by using a small function that also takes a configurable URL.</p>
  
  <p>What am I doing wrong?</p>