Access urql client directly from a component (next-urql)

[itsfolf]

I'm using next-urql in a project and have a global layout on my _app.js which needs to access the graphql client, however, according to the documentation, wrapping my _app.js with withUrqlClient will stop next.js' static optimization from working correctly. Is there any other way of being able to access the urql client from my Sidebar component?

function MyApp({ Component, pageProps }) {

  return (
    <ThemeProvider theme={theme}>
      <div>
        <Sidebar />
        <Component {...pageProps} />
      </div>
    </ThemeProvider>
  );
}

[kitten]

So I’m not quite sure I understand your goals here.

Accessing the client under a Provider like with withUrqlClient is as easy as using the hooks or using the context with useClient.

So I suppose your question is: How do I query data and use static optimisations? The answer to that is more complicated, because the static optimisation API in Next.js doesn’t really take this into account at all.

If you have next-urql set up for SSR it’ll do so using getInitialProps. If you have a page with it that means that page won’t automatically be statically rendered, if you have it on _app that means no page will automatically be statically rendered.

You can still use the manual method to define static pages: https://nextjs.org/docs/basic-features/data-fetching#getstaticprops-static-generation

But alternatively you’ll have to use initUrqlClient directly and manually query your GraphQL API in your _app’s getStaticProps function and pass those on to your header to get the automatic static optimisation back: https://github.com/FormidableLabs/urql/blob/main/packages/next-urql/src/init-urql-client.ts

This is a limitation of Next.js in how it tries to prerender pages, since it won’t assume that getInitialProps can be run statically once

[itsfolf]

Thanks, I will try this out later. I misunderstood that static optimization wouldn't work at all, not just the automatic one.
On a different question, how can I wait for a query to be completed? awaiting client.executeQuery doesn't seem to work and I couldn't find anything similar on the documentation.

[JoviDeCroock]

You should be able to use the client-query() api which exposes a toPromise method. So awaiting client.query().toPromise() should do the trick.

described here