with-apollo

[tstenel]

Bug report

I have an initiator used to set a subscription that needs to be initiated before any pageComponent loading, depending on API authentication, but the last update made it so that I can't use my initiator where it was placed before (in _app.js).
I would like to access apollo client in my Initiator (that is not a page)

Describe the bug

apollo-client isn't accessible before _app.js, causing errors like

TypeError: _useSubscription.data is undefined

and

Error while running `getDataFromTree` { Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined

To Reproduce

Try and set subscriptions in a component called before ApolloProvider in _app.js

old _app.js exemple :

 <Container>
   <ApolloProvider client={apolloClient}>
     <Initiator>
       <Content />        
    </Initiator>
  </ApolloProvider>
</Container>

with initiator not being a page component

now, since i can't use withApollo on my Initiator component, i cannot access apollo within it, and i can't set my subscriptions.

Expected behavior

Be able to access apollo in components higher than a page

Be able to set subscriptions in the Initiator

System information

• OS: Linux
• Browser: all
• Version of Next.js: last

[kachkaev]

What if you move your Initiator's logic into initApolloClient function?

[lfades]

@tstenel You don't need _app to do this, a better alternative is to create a Higher Order Component (HOC) for the pages that require the subscription, then create the subscription inside useEffect and then save the subscription into window, that way you can re-use the subscription if the page changes.

A bare bones example of what I mean:

const withSubscription = Page => props => {
  useEffect(() => {
    if (!window.subscription) {
      window.subscription = props.apollo.subscription()
    }
  }, [])

  return <Page {...props} />
}

// Then in some page
export default withSubscription(Page)

[balazsorban44]

This issue has been automatically locked due to no recent activity. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.