Passing URL parameters

[murunwas]

Unable to get nextjs url parameters (query) on server-side using getInitialProps using the Provider

WITH PROVIDER

WITHOUT PROVIDER

[jaydenseric]

Is this the code you are using for the page decorator? If so, this issue would be better filed in the examples repo. It is a very simple example for the purposes of demo.

Here is a more advanced copy and paste from one of my apps:

import 'cross-fetch/polyfill'
import React, { Component } from 'react'
import getDisplayName from 'react-display-name'
import { GraphQL, Provider, preload } from 'graphql-react'
import { Router } from 'next/router'
import App from 'next/app'

// Shares the client GraphQL instance between pages.
let clientGraphql

export const withGraphQL = Composed =>
  class WithGraphQL extends Component {
    constructor(props) {
      super(props)

      // Set the GraphQL instance used in render().
      this.graphql =
        typeof window !== 'undefined'
          ? // Client: Shared instance, created at first render after SSR.
            (clientGraphql =
              clientGraphql || new GraphQL({ cache: props.cache }))
          : // Server: Private instance for SSR.
            new GraphQL({ cache: props.cache })
    }

    static displayName = `WithGraphQL(${getDisplayName(Composed)})`

    static async getInitialProps(ctx) {
      // Use initial props from nested page decorators.
      const props = Composed.getInitialProps
        ? await Composed.getInitialProps(ctx)
        : {}

      // If server environment, preload the page.
      if (ctx.req) {
        const graphql = new GraphQL()

        await preload(
          <App
            router={new Router(ctx.pathname, ctx.query, ctx.asPath)}
            pageProps={{ graphql, pageProps: props }}
            Component={this.renderPage}
          />
        )

        props.cache = graphql.cache
      }

      return props
    }

    static renderPage = ({ graphql, pageProps }) => (
      <Provider value={graphql}>
        <Composed {...pageProps} />
      </Provider>
    )

    render() {
      return this.constructor.renderPage({
        graphql: this.graphql,
        pageProps: this.props
      })
    }
  }

[murunwas]

Thank you for the response, I just tweak the provider as shown on image below:

it's working fine but I'll try the advanced one, cheerz

[jaydenseric]

The issue seems resolved 🤞

[jaydenseric]

@murunwas you might be interested in the new way to to it with Next.js v7 and _app.js… https://github.com/jaydenseric/graphql-react-examples/blob/master/pages/_app.js#L3