[next-urql] Using SSR with both withUrqlClient and getServerSideProps

[lukel97]

I have a page that looks something like this

const Index = () => //...

export const getServerSideProps = async (ctx) => {
  const session = await getSession(ctx)
  return {
    props: {
      session
    }
  }
}

export default withUrqlClient((ssr, ctx) => {
  url: process.env.NEXT_PUBLIC_GRAPHQL_API_URL,
  suspense: false
}, { ssr: true })(Index)

Since I'm not using getInitialProps I have to set ssr to true to enable the server side rendering. However whenever I add getServerSideProps, I get an error for next complaining that I can't use it with the getInitialProps that withUrqlClient adds:

Error: You can not use getInitialProps with getServerSideProps. Please remove getInitialProps.

Is there a way to use getServerSideProps and have SSR?

[JoviDeCroock]

They can't be used together for several reasons, the intent is different. With next-urql we want to enable you to resolve useQuery calls. We use the V-DOM tree to resolve the query-hooks you got there, this means that we have to add getInitialProps to the page to run a prepass on it.

If you want to use getServerSideProps you'll have to turn ssr: false that means we don't bind getInitialProps to the page component you are wrapping in withUrql and we'll instead just inject the Provider.

The choice comes down to:
do you want to have that one getServerSideProps call or do you want to resolve your full tree of useQuery?

We as authors of these libraries don't really have a lot of "power" over these exported functions since they're more of a build-time thing than anything else.

Do note that you don't lose out on next-ssr by using getServerSideProps only on us resolving your queries used in your functional-components