Execute a urql query inside getInitialProps

[formidablelabs]

Execute a urql query inside getInitialProps

[JoviDeCroock]

Hey @addstar34

On the client you can also use the client.query method, this returns an observable with an extra method named toPromise, I think that might help the executeUrqlMethod out:

const { data } = await urqlClient
    .query(myUserQuery, variables, { requestPolicy: 'cache-only' })
    .toPromise();

What do you mean with:

In withUrqlClient HOC it would be nicer if we put urqlClient on appCtx

It's on ctx, I'm probably misunderstanding the question

[addstar34]

Hey @addstar34

On the client you can also use the client.query method, this returns an observable with an extra method named toPromise, I think that might help the executeUrqlMethod out:

const { data } = await urqlClient
    .query(myUserQuery, variables, { requestPolicy: 'cache-only' })
    .toPromise();

Oh this is nice and means I won't need that executeUrqlMethod. I just tested it out and while it works setting the request policy doesn't seem to work. I set the requestPolicy as cache-only but the request is still hitting the network, any ideas why that might be the case?

What do you mean with:

In withUrqlClient HOC it would be nicer if we put urqlClient on appCtx

It's on ctx, I'm probably misunderstanding the question

In _app.js I have to do const ctxWithUrql = { ...ctx, ctx: { ...ctx.ctx, urqlClient: ctx.urqlClient } } to make urqlClient available in other pages getInitialProps but it looks like @parkerziegler has a fix for this coming in #38

[JoviDeCroock]

I just ran the tests and it does seem to set the requestPolicy correctly on the Operation, was this network request the case before as well? If so we might just be missing a filter in one of our exchanges.

[addstar34]

Do you mean was it the case before when I was using my executeUrqlQuery fn? If I use that function as per my first post and set cache-only yeah it still hits the network and thats why I thought I was setting it incorrectly.

Doing it as you suggested this is the code I ran:

const response = await urqlClient
    .query(`{ users { email } }`, {}, { requestPolicy: 'cache-only' })
    .toPromise()

console.log('response', response)

and here you can see the request hits the network:

[JoviDeCroock]

Yes we're probably missing a filter somewhere. This is a bug on urql itself

[addstar34]

oh wow I'm glad we spotted that. Do you need me to do anything to get this over to the urql repo? I see you work there 😄

[JoviDeCroock]

@addstar34 I'll pick this up, made a draft PR. Thank you so much for notifying us!

[addstar34]

no prob, thanks for your help @JoviDeCroock

[addstar34]

Got another issue which I think might be related to this.

When I do the same query in getInitialProps and in the Component I get an error ReactDOMServer does not yet support Suspense.

Here's my code:

// authenticatedPage.js

import React, { useEffect } from 'react'
import Router from 'next/router'

function authenticatedPage(WrappedComponent) {
  const authenticatedPageWrapper = ({ redirect, ...rest }) => {
    useEffect(() => {
      if (redirect) {
        Router.replace('/sign-in')
      }
    }, [])

    if (redirect) {
      return null
    }

    return <WrappedComponent {...rest} />
  }

  authenticatedPageWrapper.getInitialProps = async ctx => {
    const { urqlClient } = ctx

    const { data, error } = await urqlClient
      .query(`{ users { id, email } }`, {}, { requestPolicy: 'cache-first' })
      .toPromise()

    if (error || !data?.users) {
      return { redirect: true }
    }

    let pageProps
    if (typeof WrappedComponent.getInitialProps === 'function') {
      pageProps = await WrappedComponent.getInitialProps.call(
        WrappedComponent,
        ctx
      )
    }

    return { ...pageProps }
  }

  return authenticatedPageWrapper
}

export default authenticatedPage

// pages/account.js

function Account() {
  const [result] = useQuery({
    query: `{ users { id, email } }`,
    requestPolicy: 'cache-only',
  })

  if (result.fetching) return <div>fetching</div>
  if (result.error) return <div>error fetching</div>

  const { data: { users: [{ id, email }] } } = result;

  return (
    <div>
      <h1>Account ID: {id} Email: {email}</h1>
    </div>
  )
}

export default authenticatedPage(Account)

As you can see I do this same query { users { id, email } } in both authenticatedPageWrapper.getInitialProps and within the page account. If I remove the email from the query in authenticatedPageWrapper.getInitialProps but leave it in account then the error is gone.

[parkerziegler]

@addstar34 if you're still struggling with second issue with duplicate queries, do you mind writing it up in a new issue description over in the urql monorepo? It's an interesting bug and one I'd love to see a minimal reproduction in a CodeSandbox for. Thanks!