ctx is not added to props on the initial render

[tomanagle]

When using withApollo on individual pages, the query object is undefined twice, before it is defined. This means that if you need to query based on props.query, it will only run the query on the client-side.

For example: https://github.com/tomanagle/NextJS-NestJS-GraphQL-Starter/blob/master/client/pages/user/%5Bpermalink%5D.tsx#L13

I added a workaround to my project by adding ctx to defaultOptions, then spreading that on the page object: https://github.com/tomanagle/NextJS-NestJS-GraphQL-Starter/blob/master/client/lib/withApollo.tsx#L29

A cleaner solution would be for withApollo to return ctx to it is spread on to the page object with the apollo client.

Please let me know if you'd like me to work on this solution, or if you have a better solution.

[rafaelpizzo]

I'm having exactly same issue, props.query is undefined on the first two renders, making the served SSR content wrong.
Our client side is conditionally loading different components on query param, so nothing renders.

We ended up getting props.query once in getServerSideProps for that part of logic, and then again on client side with Router hooks... But I'm not really happy with this approach.

I couldn't manage to make the workaround @tomanagle suggested to work on our setup though.

[tomanagle]

@rafaelpizzo a workout for query props would be to import {useRouters} from 'next/router'. Then do something like this:

const router = useRouter();
<ApolloProvider client={props.apollo}>

   <Page {...props} {...router}  />  
<ApolloProvider>

I made a video using this client and you can see the solution here: https://youtu.be/4yDrtFUbUzo?t=422