kitten.sh / urql
Mirror: The highly customizable and versatile GraphQL client with which you add on features like normalized caching as you grow.
1
fork

Configure Feed

Select the types of activity you want to include in your feed.

(next-urql) Expose initUrqlClient function for manual usage in Next’s getServerSideProps methods (#993)

* Expose initUrqlClient function so that a Client can be created manually for use in Next's newer SSR methods manually, such as getServerSideProps

* Update packages/next-urql/README.md

Co-authored-by: Phil Pluckthun <phil@kitten.sh>

* Update packages/next-urql/README.md

Co-authored-by: Phil Pluckthun <phil@kitten.sh>

* Update packages/next-urql/README.md

Co-authored-by: Phil Pluckthun <phil@kitten.sh>

* Update packages/next-urql/README.md

Co-authored-by: Parker Ziegler <parkerziegler@users.noreply.github.com>

* Update packages/next-urql/README.md

Co-authored-by: Parker Ziegler <parkerziegler@users.noreply.github.com>

* Update packages/next-urql/README.md

Co-authored-by: Parker Ziegler <parkerziegler@users.noreply.github.com>

* Update packages/next-urql/README.md

Co-authored-by: Parker Ziegler <parkerziegler@users.noreply.github.com>

Co-authored-by: Piotr Nalepa <piotr.nalepa@olx.pl>
Co-authored-by: Phil Pluckthun <phil@kitten.sh>
Co-authored-by: Parker Ziegler <parkerziegler@users.noreply.github.com>

authored by

sunpietro
Phil Pluckthun
Parker Ziegler
Piotr Nalepa and committed by
GitHub 09585530 b6b7a35d

+29
+5
.changeset/great-dragons-study.md
··· 1 + --- 2 + 'next-urql': minor 3 + --- 4 + 5 + Expose `initUrqlClient` function so that a `Client` can be created manually for use in Next's newer SSR methods manually, such as `getServerSideProps`
+23
packages/next-urql/README.md
··· 213 213 214 214 The great part about writing thin bindings like this is that they are zero cost – in fact, the above bindings get totally compiled away by BuckleScript, so you get the full benefits of type safety with absolutely zero runtime cost! 215 215 216 + ### Restricting Data Fetching to the Server 217 + 218 + If you want to use a `Client` in Next.js' newer methods like `getServerSideProps` you may use the `initUrqlClient` function to create a client on the fly. This will need to be done per request. 219 + 220 + ``` 221 + import { initUrqlClient, NextUrqlPageContext } from 'next-urql'; 222 + 223 + export const getServerSideProps = async (ctx) => { 224 + const client = initUrqlClient({ 225 + url: /graphql', 226 + }, false /* set to false to disable suspense */); 227 + 228 + const result = await client.query(QUERY, {}).toPromise(); 229 + 230 + return { 231 + props: { data: result.data } 232 + }; 233 + }; 234 + ``` 235 + 236 + The first argument passed to the `initUrqlClient` function is the same object that we'd normally pass to `createClient`. 237 + The second argument is a `boolean` flag indicating whether or not to enable `suspense`; typically, we'd disable it for manual usage. 238 + 216 239 ### Examples 217 240 218 241 You can see simple example projects using `next-urql` in the `examples` directory or on [CodeSandbox](https://codesandbox.io/s/next-urql-pokedex-oqj3x).
+1
packages/next-urql/src/index.ts
··· 1 1 export { withUrqlClient } from './with-urql-client'; 2 + export { initUrqlClient } from './init-urql-client'; 2 3 export * from './types';