Mirror: The highly customizable and versatile GraphQL client with which you add on features like normalized caching as you grow.

chore: Update links, docs, and other references (#2807)

* Update links and references

* Update main readme

* Update codeowners file to appropriate team

* Update issue templates

* Update CODE_OF_CONDUCT.md

authored by kitten.sh and committed by GitHub 4d2cb177 e7697fb7

Changed files
+152 -170
.github
docs
exchanges
auth
context
execute
multipart-fetch
persisted-fetch
populate
refocus
request-policy
retry
packages
core
introspection
next-urql
preact-urql
react-urql
site
storage-rn
storybook-addon
svelte-urql
vue-urql
+6 -6
.github/CODEOWNERS
··· 1 - /.github/ @ryan-roemer @boygirl 2 - /.changeset/config.json @ryan-roemer @boygirl 3 - /scripts/actions/* @ryan-roemer @boygirl 4 - /scripts/prepare/* @ryan-roemer @boygirl 5 - /scripts/rollup/* @ryan-roemer @boygirl 6 - /scripts/changesets/* @ryan-roemer @boygirl
··· 1 + /.github/ @urql-graphql/core 2 + /.changeset/config.json @urql-graphql/core 3 + /scripts/actions/* @urql-graphql/core 4 + /scripts/prepare/* @urql-graphql/core 5 + /scripts/rollup/* @urql-graphql/core 6 + /scripts/changesets/* @urql-graphql/core
+2 -2
.github/ISSUE_TEMPLATE/bug_report.yaml
··· 40 label: Validations 41 description: Before submitting the issue, please make sure you do the following 42 options: 43 - - label: I can confirm that this is a bug report, and not a feature request, RFC, question, or discussion, for which [GitHub Discussions](https://github.com/FormidableLabs/urql/discussions) should be used 44 required: true 45 - label: Read the [docs](https://formidable.com/open-source/urql/docs/). 46 required: true 47 - - label: Follow our [Code of Conduct](https://github.com/FormidableLabs/urql/blob/main/CODE_OF_CONDUCT.md) 48 required: true
··· 40 label: Validations 41 description: Before submitting the issue, please make sure you do the following 42 options: 43 + - label: I can confirm that this is a bug report, and not a feature request, RFC, question, or discussion, for which [GitHub Discussions](https://github.com/urql-graphql/urql/discussions) should be used 44 required: true 45 - label: Read the [docs](https://formidable.com/open-source/urql/docs/). 46 required: true 47 + - label: Follow our [Code of Conduct](https://github.com/urql-graphql/urql/blob/main/CODE_OF_CONDUCT.md) 48 required: true
+1 -1
.github/ISSUE_TEMPLATE/config.yml
··· 1 blank_issues_enabled: true 2 contact_links: 3 - name: Ask a question 4 - url: https://github.com/FormidableLabs/urql/discussions 5 about: Ask questions and discuss with other community members 6
··· 1 blank_issues_enabled: true 2 contact_links: 3 - name: Ask a question 4 + url: https://github.com/urql-graphql/urql/discussions 5 about: Ask questions and discuss with other community members 6
+3 -3
CODE_OF_CONDUCT.md
··· 57 Instances of abusive, harassing, or otherwise unacceptable behavior may be 58 reported by contacting the project team: 59 60 - - lauren.eastridge@formidable.com 61 - - phil.pluckthun@formidable.com 62 - - Twitter DMs: @_philpl 63 64 All complaints will be reviewed and investigated and will result in a response that 65 is deemed necessary and appropriate to the circumstances. The project team is
··· 57 Instances of abusive, harassing, or otherwise unacceptable behavior may be 58 reported by contacting the project team: 59 60 + - phil@0no.co 61 + - grant.sander@formidable.com 62 + - jovi@preact.dev 63 64 All complaints will be reviewed and investigated and will result in a response that 65 is deemed necessary and appropriate to the circumstances. The project team is
+6 -7
CONTRIBUTING.md
··· 17 first. We're also happy to discuss and help you open a PR and get your changes 18 in! 19 20 - - If you have a question, try [creating a GitHub Discussions thread.](https://github.com/FormidableLabs/urql/discussions/new) 21 - - If you think you've found a bug, [open a new issue.](https://github.com/FormidableLabs/urql/issues/new/choose) 22 - - or, if you found a bug you'd like to fix, [open a PR.](https://github.com/FormidableLabs/urql/compare) 23 - - If you'd like to propose a change [open an RFC issue.](https://github.com/FormidableLabs/urql/issues/new?labels=future+%F0%9F%94%AE&template=RFC.md&title=RFC%3A+Your+Proposal) You can read more about the RFC process [below](#how-do-i-propose-changes). 24 25 ### What are the issue conventions? 26 ··· 35 We follow an **RFC proposal process**. This allows anyone to propose a new feature or a change, and 36 allows us to communicate our current planned features or changes, so any technical discussion, 37 progress, or upcoming changes are always **documented transparently.** You can [find the RFC 38 - template](https://github.com/FormidableLabs/urql/issues/new/choose) in our issue creator. 39 40 - All RFCs are added to the [RFC Lifecycle board.](https://github.com/FormidableLabs/urql/projects/3) 41 This board tracks where an RFC stands and who's working on it until it's completed. Bugs and PRs may 42 end up on there too if no corresponding RFC exists or was necessary. RFCs are typically first added 43 to "In Discussion" until we believe they're ready to be worked on. This step may either be short, ··· 248 249 ```sh 250 npm access grant read-write urql:developers [package] 251 - npm access grant read-write formidable:formidable [package] 252 ```
··· 17 first. We're also happy to discuss and help you open a PR and get your changes 18 in! 19 20 + - If you have a question, try [creating a GitHub Discussions thread.](https://github.com/urql-graphql/urql/discussions/new) 21 + - If you think you've found a bug, [open a new issue.](https://github.com/urql-graphql/urql/issues/new/choose) 22 + - or, if you found a bug you'd like to fix, [open a PR.](https://github.com/urql-graphql/urql/compare) 23 + - If you'd like to propose a change [open an RFC issue.](https://github.com/urql-graphql/urql/issues/new?labels=future+%F0%9F%94%AE&template=RFC.md&title=RFC%3A+Your+Proposal) You can read more about the RFC process [below](#how-do-i-propose-changes). 24 25 ### What are the issue conventions? 26 ··· 35 We follow an **RFC proposal process**. This allows anyone to propose a new feature or a change, and 36 allows us to communicate our current planned features or changes, so any technical discussion, 37 progress, or upcoming changes are always **documented transparently.** You can [find the RFC 38 + template](https://github.com/urql-graphql/urql/issues/new/choose) in our issue creator. 39 40 + All RFCs are added to the [RFC Lifecycle board.](https://github.com/urql-graphql/urql/projects/3) 41 This board tracks where an RFC stands and who's working on it until it's completed. Bugs and PRs may 42 end up on there too if no corresponding RFC exists or was necessary. RFCs are typically first added 43 to "In Discussion" until we believe they're ready to be worked on. This step may either be short, ··· 248 249 ```sh 250 npm access grant read-write urql:developers [package] 251 ```
+2 -1
LICENSE
··· 1 MIT License 2 3 - Copyright (c) 2018–2020 Formidable 4 5 Permission is hereby granted, free of charge, to any person obtaining a copy 6 of this software and associated documentation files (the "Software"), to deal
··· 1 MIT License 2 3 + Copyright (c) 2018–2020 Formidable, 4 + Copyright (c) urql GraphQL Team and other contributors 5 6 Permission is hereby granted, free of charge, to any person obtaining a copy 7 of this software and associated documentation files (the "Software"), to deal
+13 -12
README.md
··· 10 11 <br /> 12 <br /> 13 - <a href="https://circleci.com/gh/FormidableLabs/urql"> 14 - <img alt="CI Status" src="https://github.com/FormidableLabs/urql/actions/workflows/ci.yml/badge.svg?branch=main" /> 15 - </a> 16 - <a href="https://github.com/FormidableLabs/urql#maintenance-status"> 17 - <img alt="Maintenance Status" src="https://badgen.net/badge/maintenance/active/green" /> 18 </a> 19 <a href="https://www.npmjs.com/package/urql"> 20 <img alt="Weekly downloads" src="https://badgen.net/npm/dw/urql?color=blue" /> ··· 22 <a href="https://formidable.com/open-source/urql/docs/"> 23 <img alt="Visit docs" src="https://badgen.net/badge/docs/visit site/orange" /> 24 </a> 25 - <a href="https://github.com/FormidableLabs/urql/discussions"> 26 <img alt="GitHub Discussions: Chat With Us" src="https://badgen.net/badge/discussions/chat%20with%20us/purple" /> 27 </a> 28 <br /> ··· 37 - 🌱 Normalized caching via [`@urql/exchange-graphcache`](https://formidable.com/open-source/urql/docs/graphcache) 38 - 🔬 Easy debugging with the [`urql` devtools browser extensions](https://formidable.com/open-source/urql/docs/advanced/debugging/) 39 40 - `urql` is a GraphQL client that exposes a set of helpers for several frameworks. It's built to be highly customisable and versatile so you can take it from getting started with your first GraphQL project all the way to building complex apps and experimenting with GraphQL clients. 41 42 - While GraphQL is an elegant protocol and schema language, client libraries today typically come with large API footprints. We aim to create something more lightweight instead. 43 44 ## Installation 45 ··· 49 npm install --save urql graphql 50 ``` 51 52 ## 📃 [Documentation](https://formidable.com/open-source/urql/docs/) 53 54 The documentation contains everything you need to know about `urql`, and contains several sections in order of importance ··· 61 - **[API](https://formidable.com/open-source/urql/docs/api/)** — the API documentation for each individual package. 62 63 _You can find the raw markdown files inside this repository's `docs` folder._ 64 - 65 - ## Maintenance Status 66 - 67 - **Active:** Formidable is actively working on this project, and we expect to continue work on this project for the foreseeable future. Bug reports, feature requests and pull requests are welcome. 68 69 <img width="100%" src="docs/assets/urql-spoiler.png" />
··· 10 11 <br /> 12 <br /> 13 + <a href="https://github.com/urql-graphql/urql/actions/workflows/ci.yml"> 14 + <img alt="CI Status" src="https://github.com/urql-graphql/urql/actions/workflows/ci.yml/badge.svg?branch=main" /> 15 </a> 16 <a href="https://www.npmjs.com/package/urql"> 17 <img alt="Weekly downloads" src="https://badgen.net/npm/dw/urql?color=blue" /> ··· 19 <a href="https://formidable.com/open-source/urql/docs/"> 20 <img alt="Visit docs" src="https://badgen.net/badge/docs/visit site/orange" /> 21 </a> 22 + <a href="https://github.com/urql-graphql/urql/discussions"> 23 <img alt="GitHub Discussions: Chat With Us" src="https://badgen.net/badge/discussions/chat%20with%20us/purple" /> 24 </a> 25 <br /> ··· 34 - 🌱 Normalized caching via [`@urql/exchange-graphcache`](https://formidable.com/open-source/urql/docs/graphcache) 35 - 🔬 Easy debugging with the [`urql` devtools browser extensions](https://formidable.com/open-source/urql/docs/advanced/debugging/) 36 37 + `urql` is a GraphQL client that exposes a set of helpers for several frameworks. It's built to be highly customisable and versatile so 38 + you can take it from getting started with your first GraphQL project all the way to building complex apps and experimenting with GraphQL clients. 39 40 + **📃 For more information, [check out the docs](https://formidable.com/open-source/urql/docs/).** 41 42 ## Installation 43 ··· 47 npm install --save urql graphql 48 ``` 49 50 + ## 🙌 Contributing 51 + 52 + **The urql project was founded by [Formidable](https://formidable.com/) and is actively developed 53 + by the urql GraphQL team.** 54 + 55 + If you'd like to get involved, [check out our Contributor's guide.](https://github.com/urql-graphql/urql/blob/main/CONTRIBUTING.md) 56 + 57 ## 📃 [Documentation](https://formidable.com/open-source/urql/docs/) 58 59 The documentation contains everything you need to know about `urql`, and contains several sections in order of importance ··· 66 - **[API](https://formidable.com/open-source/urql/docs/api/)** — the API documentation for each individual package. 67 68 _You can find the raw markdown files inside this repository's `docs` folder._ 69 70 <img width="100%" src="docs/assets/urql-spoiler.png" />
+1 -1
docs/advanced/README.md
··· 15 Persisted Queries and File Uploads using the two respective packages. 16 - [**Server-side Rendering**](./server-side-rendering.md) guides us through how to set up server-side rendering and rehydration. 17 - [**Debugging**](./debugging.md) shows us the [`urql` 18 - devtools](https://github.com/FormidableLabs/urql-devtools/) and how to add our own debug events 19 for its event view. 20 - [**Retrying operations**](./retry-operations.md) shows the `retryExchange` which allows you to retry operations when they've failed. 21 - [**Authentication**](./authentication.md) describes how to implement authentication using the `authExchange`
··· 15 Persisted Queries and File Uploads using the two respective packages. 16 - [**Server-side Rendering**](./server-side-rendering.md) guides us through how to set up server-side rendering and rehydration. 17 - [**Debugging**](./debugging.md) shows us the [`urql` 18 + devtools](https://github.com/urql-graphql/urql-devtools/) and how to add our own debug events 19 for its event view. 20 - [**Retrying operations**](./retry-operations.md) shows the `retryExchange` which allows you to retry operations when they've failed. 21 - [**Authentication**](./authentication.md) describes how to implement authentication using the `authExchange`
+2 -2
docs/advanced/debugging.md
··· 10 11 ## Devtools 12 13 - It's easiest to debug `urql` with the [`urql` devtools.](https://github.com/FormidableLabs/urql-devtools/) 14 15 It offers tools to inspect internal ["Debug Events"](#debug-events) as they happen, to explore data 16 as your app is seeing it, and to quickly trigger GraphQL queries. 17 18 [For instructions on how to set up the devtools, check out `@urql/devtools`'s readme in its 19 - repository.](https://github.com/FormidableLabs/urql-devtools) 20 21 ![Urql Devtools Timeline](../assets/devtools-timeline.png) 22
··· 10 11 ## Devtools 12 13 + It's easiest to debug `urql` with the [`urql` devtools.](https://github.com/urql-graphql/urql-devtools/) 14 15 It offers tools to inspect internal ["Debug Events"](#debug-events) as they happen, to explore data 16 as your app is seeing it, and to quickly trigger GraphQL queries. 17 18 [For instructions on how to set up the devtools, check out `@urql/devtools`'s readme in its 19 + repository.](https://github.com/urql-graphql/urql-devtools) 20 21 ![Urql Devtools Timeline](../assets/devtools-timeline.png) 22
+1 -1
docs/api/auth-exchange.md
··· 101 } 102 ``` 103 104 - [Read more examples in the documentation given here.](https://github.com/FormidableLabs/urql/tree/main/exchanges/auth#quick-start-guide)
··· 101 } 102 ``` 103 104 + [Read more examples in the documentation given here.](https://github.com/urql-graphql/urql/tree/main/exchanges/auth#quick-start-guide)
+1 -1
docs/architecture.md
··· 150 - [`requestPolicyExchange`](./api/request-policy-exchange.md): Automatically upgrades `cache-only` and `cache-first` operations to `cache-and-network` after a given amount of time. 151 - [`refocusExchange`](./api/refocus-exchange.md): Tracks open queries and refetches them 152 when the window regains focus. 153 - - `devtoolsExchange`: Provides the ability to use the [urql-devtools](https://github.com/FormidableLabs/urql-devtools) 154 155 We can even swap out our [document cache](./basics/document-caching.md), which is implemented by 156 `@urql/core`'s `cacheExchange`, with `urql`'s [normalized cache,
··· 150 - [`requestPolicyExchange`](./api/request-policy-exchange.md): Automatically upgrades `cache-only` and `cache-first` operations to `cache-and-network` after a given amount of time. 151 - [`refocusExchange`](./api/refocus-exchange.md): Tracks open queries and refetches them 152 when the window regains focus. 153 + - `devtoolsExchange`: Provides the ability to use the [urql-devtools](https://github.com/urql-graphql/urql-devtools) 154 155 We can even swap out our [document cache](./basics/document-caching.md), which is implemented by 156 `@urql/core`'s `cacheExchange`, with `urql`'s [normalized cache,
+5 -5
docs/basics/ui-patterns.md
··· 5 6 # UI Patterns 7 8 - > This page is incomplete. You can help us expanding it by suggesting more patterns or asking us about common problems you're facing on [GitHub Discussions](https://github.com/FormidableLabs/urql/discussions). 9 10 Generally, `urql`'s API surface is small and compact. Some common problems that we're facing when building apps may look like they're not a built-in feature, however, there are several patterns that even a lean UI can support. 11 This page is a collection of common UI patterns and problems we may face with GraphQL and how we can tackle them in ··· 87 88 Here we keep an array of all `variables` we've encountered and use them to render their 89 respective `result` page. This only rerenders the additional page rather than having a long 90 - list that constantly changes. [You can find a full code example of this pattern in our example folder on the topic of Graphcache pagination.](https://github.com/FormidableLabs/urql/tree/main/examples/with-graphcache-pagination) 91 92 - We also do not need to use our normalized cache to achieve this. As long as we're able to split individual lists up into chunks across components, we can also solve this problem entirely in UI code. [Read our example code on how to achieve this.](https://github.com/FormidableLabs/urql/tree/main/examples/with-pagination) 93 94 ## Prefetching data 95 ··· 161 In urql we leverage our extensibility pattern named "Exchanges" to manipulate the way 162 data comes in and goes out of our client. 163 164 - - [Stale time](https://github.com/FormidableLabs/urql/tree/main/exchanges/request-policy) 165 - - [Focus](https://github.com/FormidableLabs/urql/tree/main/exchanges/refocus) 166 167 When we want to introduce one of these patterns we add the package and add it to the `exchanges` 168 property of our `Client`. In the case of these two we'll have to add it before the cache
··· 5 6 # UI Patterns 7 8 + > This page is incomplete. You can help us expanding it by suggesting more patterns or asking us about common problems you're facing on [GitHub Discussions](https://github.com/urql-graphql/urql/discussions). 9 10 Generally, `urql`'s API surface is small and compact. Some common problems that we're facing when building apps may look like they're not a built-in feature, however, there are several patterns that even a lean UI can support. 11 This page is a collection of common UI patterns and problems we may face with GraphQL and how we can tackle them in ··· 87 88 Here we keep an array of all `variables` we've encountered and use them to render their 89 respective `result` page. This only rerenders the additional page rather than having a long 90 + list that constantly changes. [You can find a full code example of this pattern in our example folder on the topic of Graphcache pagination.](https://github.com/urql-graphql/urql/tree/main/examples/with-graphcache-pagination) 91 92 + We also do not need to use our normalized cache to achieve this. As long as we're able to split individual lists up into chunks across components, we can also solve this problem entirely in UI code. [Read our example code on how to achieve this.](https://github.com/urql-graphql/urql/tree/main/examples/with-pagination) 93 94 ## Prefetching data 95 ··· 161 In urql we leverage our extensibility pattern named "Exchanges" to manipulate the way 162 data comes in and goes out of our client. 163 164 + - [Stale time](https://github.com/urql-graphql/urql/tree/main/exchanges/request-policy) 165 + - [Focus](https://github.com/urql-graphql/urql/tree/main/exchanges/refocus) 166 167 When we want to introduce one of these patterns we add the package and add it to the `exchanges` 168 property of our `Client`. In the case of these two we'll have to add it before the cache
+23 -34
docs/comparison.md
··· 35 36 ### Core Features 37 38 - | | urql | Apollo | Relay | 39 - | ------------------------------------------ | ----------------------------------- | --------------------------------------------- | ------------------------------ | 40 - | Extensible on a network level | ✅ Exchanges | ✅ Links | ✅ Network Layers | 41 - | Extensible on a cache / control flow level | ✅ Exchanges | 🛑 | 🛑 | 42 - | Base Bundle Size | **5.9kB** (7.1kB with bindings) | 32.9kB | 27.7kB (34.1kB with bindings) | 43 - | Devtools | ✅ | ✅ | ✅ | 44 - | Subscriptions | ✅ | ✅ | ✅ | 45 - | Client-side Rehydration | ✅ | ✅ | ✅ | 46 - | Polled Queries | 🔶 | ✅ | ✅ | 47 - | Lazy Queries | ✅ | ✅ | ✅ | 48 - | Stale while Revalidate / Cache and Network | ✅ | ✅ | ✅ | 49 - | Focus Refetching | ✅ `@urql/exchange-refocus` | 🛑 | 🛑 | 50 - | Stale Time Configuration | ✅ `@urql/exchange-request-policy` | ✅ | 🛑 | 51 - | Persisted Queries | ✅ `@urql/exchange-persisted-fetch` | ✅ `apollo-link-persisted-queries` | ✅ | 52 - | Batched Queries | 🛑 | ✅ `apollo-link-batch-http` | 🟡 `react-relay-network-layer` | 53 - | Live Queries | 🛑 | 🛑 | ✅ | 54 - | Defer & Stream Directives | ✅ | ✅ / 🛑 (`@defer` is supported in >=3.7.0, `@stream` is not yet supported) | 🟡 (unreleased) | 55 - | Switching to `GET` method | ✅ | ✅ | 🟡 `react-relay-network-layer` | 56 - | File Uploads | ✅ `@urql/exchange-multipart-fetch` | 🟡 `apollo-upload-client` | 🛑 | 57 - | Retrying Failed Queries | ✅ `@urql/exchange-retry` | ✅ `apollo-link-retry` | ✅ `DefaultNetworkLayer` | 58 - | Easy Authentication Flows | ✅ `@urql/exchange-auth` | 🛑 (no docs for refresh-based authentication) | 🟡 `react-relay-network-layer` | 59 - | Automatic Refetch after Mutation | ✅ (with document cache) | 🛑 | ✅ | 60 61 Typically these are all additional addon features that you may expect from a GraphQL client, no 62 matter which framework you use it with. It's worth mentioning that all three clients support some ··· 73 74 One thing of note is our lack of support for batched queries in `urql`. We explicitly decided not to 75 support this in our [first-party 76 - packages](https://github.com/FormidableLabs/urql/issues/800#issuecomment-626342821) as the benefits 77 are not present anymore in most cases with HTTP/2 and established patterns by Relay that recommend 78 hoisting all necessary data requirements to a page-wide query. 79 ··· 91 | Vue Bindings | ✅ | 🟡 `vue-apollo` | 🟡 `vue-relay` | 92 | Angular Bindings | 🛑 | 🟡 `apollo-angular` | 🟡 `relay-angular` | 93 | Initial Data on mount | ✅ | ✅ | ✅ | 94 - 95 - Interestingly all three libraries heavily support React as they were all started from the React 96 - community outwards, but Apollo and Vue benefit from community bindings for different frameworks a 97 - lot. `urql`'s community is still growing and while that means it won't see large projects as 98 - Apollo's `vue-apollo` in the short term, we're aiming for first-party support for these bindings. 99 - 100 - This is a common criticism that we hear about `urql`, and it's true that our community isn't as 101 - extensive, but we attempt to lean on good and well funded maintenance at Formidable, active 102 - investment, and good documentation. So you may have to evaluate whether you can get any questions 103 - answered quickly enough on [GitHub Discussions](https://github.com/FormidableLabs/urql/discussions) 104 - for instance. 105 106 ### Caching and State 107
··· 35 36 ### Core Features 37 38 + | | urql | Apollo | Relay | 39 + | ------------------------------------------ | ----------------------------------- | -------------------------------------------------------------------------- | ------------------------------ | 40 + | Extensible on a network level | ✅ Exchanges | ✅ Links | ✅ Network Layers | 41 + | Extensible on a cache / control flow level | ✅ Exchanges | 🛑 | 🛑 | 42 + | Base Bundle Size | **5.9kB** (7.1kB with bindings) | 32.9kB | 27.7kB (34.1kB with bindings) | 43 + | Devtools | ✅ | ✅ | ✅ | 44 + | Subscriptions | ✅ | ✅ | ✅ | 45 + | Client-side Rehydration | ✅ | ✅ | ✅ | 46 + | Polled Queries | 🔶 | ✅ | ✅ | 47 + | Lazy Queries | ✅ | ✅ | ✅ | 48 + | Stale while Revalidate / Cache and Network | ✅ | ✅ | ✅ | 49 + | Focus Refetching | ✅ `@urql/exchange-refocus` | 🛑 | 🛑 | 50 + | Stale Time Configuration | ✅ `@urql/exchange-request-policy` | ✅ | 🛑 | 51 + | Persisted Queries | ✅ `@urql/exchange-persisted-fetch` | ✅ `apollo-link-persisted-queries` | ✅ | 52 + | Batched Queries | 🛑 | ✅ `apollo-link-batch-http` | 🟡 `react-relay-network-layer` | 53 + | Live Queries | 🛑 | 🛑 | ✅ | 54 + | Defer & Stream Directives | ✅ | ✅ / 🛑 (`@defer` is supported in >=3.7.0, `@stream` is not yet supported) | 🟡 (unreleased) | 55 + | Switching to `GET` method | ✅ | ✅ | 🟡 `react-relay-network-layer` | 56 + | File Uploads | ✅ `@urql/exchange-multipart-fetch` | 🟡 `apollo-upload-client` | 🛑 | 57 + | Retrying Failed Queries | ✅ `@urql/exchange-retry` | ✅ `apollo-link-retry` | ✅ `DefaultNetworkLayer` | 58 + | Easy Authentication Flows | ✅ `@urql/exchange-auth` | 🛑 (no docs for refresh-based authentication) | 🟡 `react-relay-network-layer` | 59 + | Automatic Refetch after Mutation | ✅ (with document cache) | 🛑 | ✅ | 60 61 Typically these are all additional addon features that you may expect from a GraphQL client, no 62 matter which framework you use it with. It's worth mentioning that all three clients support some ··· 73 74 One thing of note is our lack of support for batched queries in `urql`. We explicitly decided not to 75 support this in our [first-party 76 + packages](https://github.com/urql-graphql/urql/issues/800#issuecomment-626342821) as the benefits 77 are not present anymore in most cases with HTTP/2 and established patterns by Relay that recommend 78 hoisting all necessary data requirements to a page-wide query. 79 ··· 91 | Vue Bindings | ✅ | 🟡 `vue-apollo` | 🟡 `vue-relay` | 92 | Angular Bindings | 🛑 | 🟡 `apollo-angular` | 🟡 `relay-angular` | 93 | Initial Data on mount | ✅ | ✅ | ✅ | 94 95 ### Caching and State 96
+1 -1
docs/graphcache/errors.md
··· 370 warning. This may happen because you've used the default reserved names `Mutation` or `Subscription` 371 for entities rather than as special Operation Root Types, and haven't specified this in the schema. 372 Hence this issue can often be fixed by either enabling 373 - [Schema Awareness](https://formidable.com/open-source/urql/docs/graphcache/schema-awareness/) or by 374 adding a `schema` definition to your GraphQL Schema like so: 375 376 ```graphql
··· 370 warning. This may happen because you've used the default reserved names `Mutation` or `Subscription` 371 for entities rather than as special Operation Root Types, and haven't specified this in the schema. 372 Hence this issue can often be fixed by either enabling 373 + [Schema Awareness](./schema-awareness.md) or by 374 adding a `schema` definition to your GraphQL Schema like so: 375 376 ```graphql
+3 -3
docs/graphcache/offline.md
··· 91 92 For React Native, we can use the async storage package `@urql/storage-rn`. 93 94 - Before installing the [library](https://github.com/FormidableLabs/urql/tree/main/packages/storage-rn), ensure you have installed the necessary peer dependencies: 95 - NetInfo ([RN](https://github.com/react-native-netinfo/react-native-netinfo) | [Expo](https://docs.expo.dev/versions/latest/sdk/netinfo/)) and 96 - AsyncStorage ([RN](https://react-native-async-storage.github.io/async-storage/docs/install) | [Expo](https://docs.expo.dev/versions/v42.0.0/sdk/async-storage/)). 97 ··· 103 104 You can then create the custom storage and use it in the offline exchange: 105 106 - 107 ```js 108 import { makeAsyncStorage } from '@urql/storage-rn'; 109 110 const storage = makeAsyncStorage({ 111 dataKey: 'graphcache-data', // The AsyncStorage key used for the data (defaults to graphcache-data) 112 metadataKey: 'graphcache-metadata', // The AsyncStorage key used for the metadata (defaults to graphcache-metadata) 113 - maxAge: 7 // How long to persist the data in storage (defaults to 7 days) 114 }); 115 ``` 116
··· 91 92 For React Native, we can use the async storage package `@urql/storage-rn`. 93 94 + Before installing the [library](https://github.com/urql-graphql/urql/tree/main/packages/storage-rn), ensure you have installed the necessary peer dependencies: 95 + 96 - NetInfo ([RN](https://github.com/react-native-netinfo/react-native-netinfo) | [Expo](https://docs.expo.dev/versions/latest/sdk/netinfo/)) and 97 - AsyncStorage ([RN](https://react-native-async-storage.github.io/async-storage/docs/install) | [Expo](https://docs.expo.dev/versions/v42.0.0/sdk/async-storage/)). 98 ··· 104 105 You can then create the custom storage and use it in the offline exchange: 106 107 ```js 108 import { makeAsyncStorage } from '@urql/storage-rn'; 109 110 const storage = makeAsyncStorage({ 111 dataKey: 'graphcache-data', // The AsyncStorage key used for the data (defaults to graphcache-data) 112 metadataKey: 'graphcache-metadata', // The AsyncStorage key used for the metadata (defaults to graphcache-metadata) 113 + maxAge: 7, // How long to persist the data in storage (defaults to 7 days) 114 }); 115 ``` 116
+12 -21
exchanges/auth/README.md
··· 2 3 <p align="center"><strong>An exchange for managing authentication in <code>urql</code></strong></p> 4 5 - `@urql/exchange-auth` is an exchange for the [`urql`](https://github.com/FormidableLabs/urql) GraphQL client which helps handle auth headers and token refresh 6 7 ## Quick Start Guide 8 ··· 27 dedupExchange, 28 cacheExchange, 29 authExchange({ 30 - addAuthToOperation: ({ 31 - authState, 32 - operation, 33 - }) => { 34 // the token isn't in the auth state, return the operation without changes 35 if (!authState || !authState.token) { 36 return operation; ··· 42 ? operation.context.fetchOptions() 43 : operation.context.fetchOptions || {}; 44 45 - return makeOperation( 46 - operation.kind, 47 - operation, 48 - { 49 - ...operation.context, 50 - fetchOptions: { 51 - ...fetchOptions, 52 - headers: { 53 - ...fetchOptions.headers, 54 - "Authorization": authState.token, 55 - }, 56 }, 57 }, 58 - ); 59 }, 60 willAuthError: ({ authState }) => { 61 if (!authState) return true; ··· 64 }, 65 didAuthError: ({ error }) => { 66 // check if the error was an auth error (this can be implemented in various ways, e.g. 401 or a special error code) 67 - return error.graphQLErrors.some( 68 - e => e.extensions?.code === 'FORBIDDEN', 69 - ); 70 }, 71 getAuth: async ({ authState, mutate }) => { 72 // for initial launch, fetch the auth state from storage (local storage, async storage etc) ··· 112 return null; 113 }, 114 }), 115 - fetchExchange 116 ], 117 }); 118 ```
··· 2 3 <p align="center"><strong>An exchange for managing authentication in <code>urql</code></strong></p> 4 5 + `@urql/exchange-auth` is an exchange for the [`urql`](https://github.com/urql-graphql/urql) GraphQL client which helps handle auth headers and token refresh 6 7 ## Quick Start Guide 8 ··· 27 dedupExchange, 28 cacheExchange, 29 authExchange({ 30 + addAuthToOperation: ({ authState, operation }) => { 31 // the token isn't in the auth state, return the operation without changes 32 if (!authState || !authState.token) { 33 return operation; ··· 39 ? operation.context.fetchOptions() 40 : operation.context.fetchOptions || {}; 41 42 + return makeOperation(operation.kind, operation, { 43 + ...operation.context, 44 + fetchOptions: { 45 + ...fetchOptions, 46 + headers: { 47 + ...fetchOptions.headers, 48 + Authorization: authState.token, 49 }, 50 }, 51 + }); 52 }, 53 willAuthError: ({ authState }) => { 54 if (!authState) return true; ··· 57 }, 58 didAuthError: ({ error }) => { 59 // check if the error was an auth error (this can be implemented in various ways, e.g. 401 or a special error code) 60 + return error.graphQLErrors.some(e => e.extensions?.code === 'FORBIDDEN'); 61 }, 62 getAuth: async ({ authState, mutate }) => { 63 // for initial launch, fetch the auth state from storage (local storage, async storage etc) ··· 103 return null; 104 }, 105 }), 106 + fetchExchange, 107 ], 108 }); 109 ```
+3 -3
exchanges/auth/package.json
··· 4 "description": "An exchange for managing authentication and token refresh in urql", 5 "sideEffects": false, 6 "homepage": "https://formidable.com/open-source/urql/docs/", 7 - "bugs": "https://github.com/FormidableLabs/urql/issues", 8 "license": "MIT", 9 "repository": { 10 "type": "git", 11 - "url": "https://github.com/FormidableLabs/urql.git", 12 "directory": "exchanges/auth" 13 }, 14 "keywords": [ ··· 16 "exchange", 17 "auth", 18 "authentication", 19 - "formidablelabs", 20 "exchanges" 21 ], 22 "main": "dist/urql-exchange-auth",
··· 4 "description": "An exchange for managing authentication and token refresh in urql", 5 "sideEffects": false, 6 "homepage": "https://formidable.com/open-source/urql/docs/", 7 + "bugs": "https://github.com/urql-graphql/urql/issues", 8 "license": "MIT", 9 "repository": { 10 "type": "git", 11 + "url": "https://github.com/urql-graphql/urql.git", 12 "directory": "exchanges/auth" 13 }, 14 "keywords": [ ··· 16 "exchange", 17 "auth", 18 "authentication", 19 + "graphql", 20 "exchanges" 21 ], 22 "main": "dist/urql-exchange-auth",
+3 -3
exchanges/context/README.md
··· 2 3 <p align="center"><strong>An exchange for setting operation context in <code>urql</code></strong></p> 4 5 - `@urql/exchange-context` is an exchange for the [`urql`](https://github.com/FormidableLabs/urql) GraphQL client which can set the operation context both synchronously as well as asynchronously 6 7 ## Quick Start Guide 8 ··· 26 dedupExchange, 27 cacheExchange, 28 contextExchange({ 29 - getContext: async (operation) => { 30 const token = await getToken(); 31 - return { ...operation.context, headers: { authorization: token } } 32 }, 33 }), 34 fetchExchange,
··· 2 3 <p align="center"><strong>An exchange for setting operation context in <code>urql</code></strong></p> 4 5 + `@urql/exchange-context` is an exchange for the [`urql`](https://github.com/urql-graphql/urql) GraphQL client which can set the operation context both synchronously as well as asynchronously 6 7 ## Quick Start Guide 8 ··· 26 dedupExchange, 27 cacheExchange, 28 contextExchange({ 29 + getContext: async operation => { 30 const token = await getToken(); 31 + return { ...operation.context, headers: { authorization: token } }; 32 }, 33 }), 34 fetchExchange,
+3 -3
exchanges/context/package.json
··· 4 "description": "An exchange for setting (a)synchronous operation-context in urql", 5 "sideEffects": false, 6 "homepage": "https://formidable.com/open-source/urql/docs/", 7 - "bugs": "https://github.com/FormidableLabs/urql/issues", 8 "license": "MIT", 9 "repository": { 10 "type": "git", 11 - "url": "https://github.com/FormidableLabs/urql.git", 12 "directory": "exchanges/context" 13 }, 14 "keywords": [ 15 "urql", 16 "exchange", 17 "context", 18 - "formidablelabs", 19 "exchanges" 20 ], 21 "main": "dist/urql-exchange-context",
··· 4 "description": "An exchange for setting (a)synchronous operation-context in urql", 5 "sideEffects": false, 6 "homepage": "https://formidable.com/open-source/urql/docs/", 7 + "bugs": "https://github.com/urql-graphql/urql/issues", 8 "license": "MIT", 9 "repository": { 10 "type": "git", 11 + "url": "https://github.com/urql-graphql/urql.git", 12 "directory": "exchanges/context" 13 }, 14 "keywords": [ 15 "urql", 16 "exchange", 17 "context", 18 + "graphql", 19 "exchanges" 20 ], 21 "main": "dist/urql-exchange-context",
+1 -1
exchanges/execute/README.md
··· 2 3 <p align="center"><strong>An exchange for executing queries against a local schema in <code>urql</code></strong></p> 4 5 - `@urql/exchange-execute` is an exchange for the [`urql`](https://github.com/FormidableLabs/urql) GraphQL client which executes queries against a local schema. 6 This is a replacement for the default _fetchExchange_ which sends queries over HTTP/S to be executed remotely. 7 8 ## Quick Start Guide
··· 2 3 <p align="center"><strong>An exchange for executing queries against a local schema in <code>urql</code></strong></p> 4 5 + `@urql/exchange-execute` is an exchange for the [`urql`](https://github.com/urql-graphql/urql) GraphQL client which executes queries against a local schema. 6 This is a replacement for the default _fetchExchange_ which sends queries over HTTP/S to be executed remotely. 7 8 ## Quick Start Guide
+3 -3
exchanges/execute/package.json
··· 4 "description": "An exchange for executing queries against a local schema in urql", 5 "sideEffects": false, 6 "homepage": "https://formidable.com/open-source/urql/docs/", 7 - "bugs": "https://github.com/FormidableLabs/urql/issues", 8 "license": "MIT", 9 "repository": { 10 "type": "git", 11 - "url": "https://github.com/FormidableLabs/urql.git", 12 "directory": "exchanges/execute" 13 }, 14 "keywords": [ ··· 16 "exchange", 17 "execute", 18 "executable schema", 19 - "formidablelabs", 20 "exchanges" 21 ], 22 "main": "dist/urql-exchange-execute",
··· 4 "description": "An exchange for executing queries against a local schema in urql", 5 "sideEffects": false, 6 "homepage": "https://formidable.com/open-source/urql/docs/", 7 + "bugs": "https://github.com/urql-graphql/urql/issues", 8 "license": "MIT", 9 "repository": { 10 "type": "git", 11 + "url": "https://github.com/urql-graphql/urql.git", 12 "directory": "exchanges/execute" 13 }, 14 "keywords": [ ··· 16 "exchange", 17 "execute", 18 "executable schema", 19 + "graphql", 20 "exchanges" 21 ], 22 "main": "dist/urql-exchange-execute",
+3 -3
exchanges/multipart-fetch/package.json
··· 4 "description": "An exchange that allows regular fetch and will transition to multipart when files are included", 5 "sideEffects": false, 6 "homepage": "https://formidable.com/open-source/urql/docs/", 7 - "bugs": "https://github.com/FormidableLabs/urql/issues", 8 "license": "MIT", 9 "repository": { 10 "type": "git", 11 - "url": "https://github.com/FormidableLabs/urql.git", 12 "directory": "exchanges/multipart-fetch" 13 }, 14 "keywords": [ 15 "urql", 16 - "formidablelabs", 17 "exchanges" 18 ], 19 "main": "dist/urql-exchange-multipart-fetch",
··· 4 "description": "An exchange that allows regular fetch and will transition to multipart when files are included", 5 "sideEffects": false, 6 "homepage": "https://formidable.com/open-source/urql/docs/", 7 + "bugs": "https://github.com/urql-graphql/urql/issues", 8 "license": "MIT", 9 "repository": { 10 "type": "git", 11 + "url": "https://github.com/urql-graphql/urql.git", 12 "directory": "exchanges/multipart-fetch" 13 }, 14 "keywords": [ 15 "urql", 16 + "graphql", 17 "exchanges" 18 ], 19 "main": "dist/urql-exchange-multipart-fetch",
+3 -3
exchanges/persisted-fetch/package.json
··· 4 "description": "An exchange that allows for persisted queries support when fetching queries", 5 "sideEffects": false, 6 "homepage": "https://formidable.com/open-source/urql/docs/", 7 - "bugs": "https://github.com/FormidableLabs/urql/issues", 8 "license": "MIT", 9 "repository": { 10 "type": "git", 11 - "url": "https://github.com/FormidableLabs/urql.git", 12 "directory": "exchanges/persisted-fetch" 13 }, 14 "keywords": [ 15 "urql", 16 - "formidablelabs", 17 "persisted queries", 18 "exchanges" 19 ],
··· 4 "description": "An exchange that allows for persisted queries support when fetching queries", 5 "sideEffects": false, 6 "homepage": "https://formidable.com/open-source/urql/docs/", 7 + "bugs": "https://github.com/urql-graphql/urql/issues", 8 "license": "MIT", 9 "repository": { 10 "type": "git", 11 + "url": "https://github.com/urql-graphql/urql.git", 12 "directory": "exchanges/persisted-fetch" 13 }, 14 "keywords": [ 15 "urql", 16 + "graphql", 17 "persisted queries", 18 "exchanges" 19 ],
+3 -3
exchanges/populate/package.json
··· 4 "description": "An exchange that automaticcally populates the mutation selection body", 5 "sideEffects": false, 6 "homepage": "https://formidable.com/open-source/urql/docs/advanced/auto-populate-mutations", 7 - "bugs": "https://github.com/FormidableLabs/urql/issues", 8 "license": "MIT", 9 "repository": { 10 "type": "git", 11 - "url": "https://github.com/FormidableLabs/urql.git", 12 "directory": "exchanges/populate" 13 }, 14 "keywords": [ 15 "urql", 16 - "formidablelabs", 17 "exchanges" 18 ], 19 "main": "dist/urql-exchange-populate",
··· 4 "description": "An exchange that automaticcally populates the mutation selection body", 5 "sideEffects": false, 6 "homepage": "https://formidable.com/open-source/urql/docs/advanced/auto-populate-mutations", 7 + "bugs": "https://github.com/urql-graphql/urql/issues", 8 "license": "MIT", 9 "repository": { 10 "type": "git", 11 + "url": "https://github.com/urql-graphql/urql.git", 12 "directory": "exchanges/populate" 13 }, 14 "keywords": [ 15 "urql", 16 + "graphql", 17 "exchanges" 18 ], 19 "main": "dist/urql-exchange-populate",
+3 -3
exchanges/refocus/package.json
··· 4 "description": "An exchange that dispatches active operations when the window regains focus", 5 "sideEffects": false, 6 "homepage": "https://formidable.com/open-source/urql/docs/", 7 - "bugs": "https://github.com/FormidableLabs/urql/issues", 8 "license": "MIT", 9 "repository": { 10 "type": "git", 11 - "url": "https://github.com/FormidableLabs/urql.git", 12 "directory": "exchanges/refocus" 13 }, 14 "keywords": [ 15 "urql", 16 "graphql client", 17 - "formidablelabs", 18 "exchanges", 19 "react", 20 "focus"
··· 4 "description": "An exchange that dispatches active operations when the window regains focus", 5 "sideEffects": false, 6 "homepage": "https://formidable.com/open-source/urql/docs/", 7 + "bugs": "https://github.com/urql-graphql/urql/issues", 8 "license": "MIT", 9 "repository": { 10 "type": "git", 11 + "url": "https://github.com/urql-graphql/urql.git", 12 "directory": "exchanges/refocus" 13 }, 14 "keywords": [ 15 "urql", 16 "graphql client", 17 + "graphql", 18 "exchanges", 19 "react", 20 "focus"
+3 -3
exchanges/request-policy/package.json
··· 4 "description": "An exchange for operation request-policy upgrading in urql", 5 "sideEffects": false, 6 "homepage": "https://formidable.com/open-source/urql/docs/", 7 - "bugs": "https://github.com/FormidableLabs/urql/issues", 8 "license": "MIT", 9 "repository": { 10 "type": "git", 11 - "url": "https://github.com/FormidableLabs/urql.git", 12 "directory": "exchanges/request-policy" 13 }, 14 "keywords": [ 15 "urql", 16 "graphql client", 17 - "formidablelabs", 18 "exchanges", 19 "request-policy" 20 ],
··· 4 "description": "An exchange for operation request-policy upgrading in urql", 5 "sideEffects": false, 6 "homepage": "https://formidable.com/open-source/urql/docs/", 7 + "bugs": "https://github.com/urql-graphql/urql/issues", 8 "license": "MIT", 9 "repository": { 10 "type": "git", 11 + "url": "https://github.com/urql-graphql/urql.git", 12 "directory": "exchanges/request-policy" 13 }, 14 "keywords": [ 15 "urql", 16 "graphql client", 17 + "graphql", 18 "exchanges", 19 "request-policy" 20 ],
+3 -3
exchanges/retry/package.json
··· 4 "description": "An exchange for operation retry support in urql", 5 "sideEffects": false, 6 "homepage": "https://formidable.com/open-source/urql/docs/", 7 - "bugs": "https://github.com/FormidableLabs/urql/issues", 8 "license": "MIT", 9 "repository": { 10 "type": "git", 11 - "url": "https://github.com/FormidableLabs/urql.git", 12 "directory": "exchanges/retry" 13 }, 14 "keywords": [ 15 "urql", 16 "graphql client", 17 - "formidablelabs", 18 "exchanges", 19 "retry" 20 ],
··· 4 "description": "An exchange for operation retry support in urql", 5 "sideEffects": false, 6 "homepage": "https://formidable.com/open-source/urql/docs/", 7 + "bugs": "https://github.com/urql-graphql/urql/issues", 8 "license": "MIT", 9 "repository": { 10 "type": "git", 11 + "url": "https://github.com/urql-graphql/urql.git", 12 "directory": "exchanges/retry" 13 }, 14 "keywords": [ 15 "urql", 16 "graphql client", 17 + "graphql", 18 "exchanges", 19 "retry" 20 ],
+3 -3
packages/core/package.json
··· 4 "description": "The shared core for the highly customizable and versatile GraphQL client", 5 "sideEffects": false, 6 "homepage": "https://formidable.com/open-source/urql/docs/", 7 - "bugs": "https://github.com/FormidableLabs/urql/issues", 8 "license": "MIT", 9 "repository": { 10 "type": "git", 11 - "url": "https://github.com/FormidableLabs/urql.git", 12 "directory": "packages/core" 13 }, 14 "keywords": [ 15 "graphql client", 16 "state management", 17 "cache", 18 - "formidablelabs", 19 "exchanges" 20 ], 21 "main": "dist/urql-core",
··· 4 "description": "The shared core for the highly customizable and versatile GraphQL client", 5 "sideEffects": false, 6 "homepage": "https://formidable.com/open-source/urql/docs/", 7 + "bugs": "https://github.com/urql-graphql/urql/issues", 8 "license": "MIT", 9 "repository": { 10 "type": "git", 11 + "url": "https://github.com/urql-graphql/urql.git", 12 "directory": "packages/core" 13 }, 14 "keywords": [ 15 + "graphql", 16 "graphql client", 17 "state management", 18 "cache", 19 "exchanges" 20 ], 21 "main": "dist/urql-core",
+4 -4
packages/introspection/package.json
··· 4 "description": "Utilities for dealing with Introspection Queries and Client Schemas", 5 "sideEffects": false, 6 "homepage": "https://formidable.com/open-source/urql/docs/", 7 - "bugs": "https://github.com/FormidableLabs/urql/issues", 8 "license": "MIT", 9 "repository": { 10 "type": "git", 11 - "url": "https://github.com/FormidableLabs/urql.git", 12 "directory": "packages/introspection" 13 }, 14 "keywords": [ 15 "graphql client", 16 "graphql schema", 17 - "schema", 18 - "formidablelabs" 19 ], 20 "main": "dist/urql-introspection", 21 "module": "dist/urql-introspection.mjs",
··· 4 "description": "Utilities for dealing with Introspection Queries and Client Schemas", 5 "sideEffects": false, 6 "homepage": "https://formidable.com/open-source/urql/docs/", 7 + "bugs": "https://github.com/urql-graphql/urql/issues", 8 "license": "MIT", 9 "repository": { 10 "type": "git", 11 + "url": "https://github.com/urql-graphql/urql.git", 12 "directory": "packages/introspection" 13 }, 14 "keywords": [ 15 + "graphql", 16 "graphql client", 17 "graphql schema", 18 + "schema" 19 ], 20 "main": "dist/urql-introspection", 21 "module": "dist/urql-introspection.mjs",
+9 -9
packages/next-urql/README.md
··· 5 <a href="https://npmjs.com/package/next-urql"> 6 <img alt="NPM Version" src="https://img.shields.io/npm/v/next-urql.svg" /> 7 </a> 8 - <a href="https://travis-ci.com/FormidableLabs/next-urql"> 9 - <img alt="Test Status" src="https://api.travis-ci.com/FormidableLabs/next-urql.svg?branch=master" /> 10 - </a> 11 </div> 12 13 ## `next-urql` ··· 30 npm install --save next-urql react-is urql 31 ``` 32 33 - `react-is` helps to support server-side `Suspense` with `react-ssr-prepass`. This assumes you have followed the basic installation steps for `urql` [here](https://github.com/FormidableLabs/urql#installation). 34 35 Note that if you are using Next before v9.4 you'll need to polyfill fetch, this can be 36 done through [`isomorphic-unfetch`](https://www.npmjs.com/package/isomorphic-unfetch). ··· 225 ```javascript 226 import { initUrqlClient } from 'next-urql'; 227 228 - export const getServerSideProps = async (ctx) => { 229 - const client = initUrqlClient({ 230 - url: '/graphql', 231 - }, false /* set to false to disable suspense */); 232 233 const result = await client.query(QUERY, {}).toPromise(); 234 235 return { 236 - props: { data: result.data } 237 }; 238 }; 239 ```
··· 5 <a href="https://npmjs.com/package/next-urql"> 6 <img alt="NPM Version" src="https://img.shields.io/npm/v/next-urql.svg" /> 7 </a> 8 </div> 9 10 ## `next-urql` ··· 27 npm install --save next-urql react-is urql 28 ``` 29 30 + `react-is` helps to support server-side `Suspense` with `react-ssr-prepass`. This assumes you have followed the basic installation steps for `urql` [here](https://github.com/urql-graphql/urql#installation). 31 32 Note that if you are using Next before v9.4 you'll need to polyfill fetch, this can be 33 done through [`isomorphic-unfetch`](https://www.npmjs.com/package/isomorphic-unfetch). ··· 222 ```javascript 223 import { initUrqlClient } from 'next-urql'; 224 225 + export const getServerSideProps = async ctx => { 226 + const client = initUrqlClient( 227 + { 228 + url: '/graphql', 229 + }, 230 + false /* set to false to disable suspense */ 231 + ); 232 233 const result = await client.query(QUERY, {}).toPromise(); 234 235 return { 236 + props: { data: result.data }, 237 }; 238 }; 239 ```
+2 -2
packages/next-urql/package.json
··· 4 "description": "Convenience wrappers for using urql with NextJS.", 5 "sideEffects": false, 6 "homepage": "https://formidable.com/open-source/urql/docs/", 7 - "bugs": "https://github.com/FormidableLabs/urql/issues", 8 "license": "MIT", 9 "repository": { 10 "type": "git", 11 - "url": "https://github.com/FormidableLabs/urql.git", 12 "directory": "packages/next-urql" 13 }, 14 "main": "dist/next-urql.js",
··· 4 "description": "Convenience wrappers for using urql with NextJS.", 5 "sideEffects": false, 6 "homepage": "https://formidable.com/open-source/urql/docs/", 7 + "bugs": "https://github.com/urql-graphql/urql/issues", 8 "license": "MIT", 9 "repository": { 10 "type": "git", 11 + "url": "https://github.com/urql-graphql/urql.git", 12 "directory": "packages/next-urql" 13 }, 14 "main": "dist/next-urql.js",
+3 -3
packages/preact-urql/package.json
··· 4 "description": "A highly customizable and versatile GraphQL client for Preact", 5 "sideEffects": false, 6 "homepage": "https://formidable.com/open-source/urql/docs/", 7 - "bugs": "https://github.com/FormidableLabs/urql/issues", 8 "license": "MIT", 9 "repository": { 10 "type": "git", 11 - "url": "https://github.com/FormidableLabs/urql.git", 12 "directory": "packages/preact-urql" 13 }, 14 "keywords": [ 15 "graphql client", 16 "state management", 17 "cache", 18 - "formidablelabs", 19 "exchanges", 20 "preact" 21 ],
··· 4 "description": "A highly customizable and versatile GraphQL client for Preact", 5 "sideEffects": false, 6 "homepage": "https://formidable.com/open-source/urql/docs/", 7 + "bugs": "https://github.com/urql-graphql/urql/issues", 8 "license": "MIT", 9 "repository": { 10 "type": "git", 11 + "url": "https://github.com/urql-graphql/urql.git", 12 "directory": "packages/preact-urql" 13 }, 14 "keywords": [ 15 "graphql client", 16 "state management", 17 "cache", 18 + "graphql", 19 "exchanges", 20 "preact" 21 ],
+3 -3
packages/react-urql/package.json
··· 4 "description": "A highly customizable and versatile GraphQL client for React", 5 "sideEffects": false, 6 "homepage": "https://formidable.com/open-source/urql/docs/", 7 - "bugs": "https://github.com/FormidableLabs/urql/issues", 8 "license": "MIT", 9 "repository": { 10 "type": "git", 11 - "url": "https://github.com/FormidableLabs/urql.git", 12 "directory": "packages/react-urql" 13 }, 14 "keywords": [ 15 "graphql client", 16 "state management", 17 "cache", 18 - "formidablelabs", 19 "exchanges", 20 "react" 21 ],
··· 4 "description": "A highly customizable and versatile GraphQL client for React", 5 "sideEffects": false, 6 "homepage": "https://formidable.com/open-source/urql/docs/", 7 + "bugs": "https://github.com/urql-graphql/urql/issues", 8 "license": "MIT", 9 "repository": { 10 "type": "git", 11 + "url": "https://github.com/urql-graphql/urql.git", 12 "directory": "packages/react-urql" 13 }, 14 "keywords": [ 15 "graphql client", 16 "state management", 17 "cache", 18 + "graphql", 19 "exchanges", 20 "react" 21 ],
+2 -1
packages/site/CHANGELOG.md
··· 1 # urql-docs 2 3 ## 1.0.0 4 ### Major Changes 5 6 - - **Goodbye IE11!** 👋 This major release removes support for IE11. All code that is shipped will be transpiled much less and will _not_ be ES5-compatible anymore, by [@kitten](https://github.com/kitten) (See [#2504](https://github.com/FormidableLabs/urql/pull/2504))
··· 1 # urql-docs 2 3 ## 1.0.0 4 + 5 ### Major Changes 6 7 + - **Goodbye IE11!** 👋 This major release removes support for IE11. All code that is shipped will be transpiled much less and will _not_ be ES5-compatible anymore, by [@kitten](https://github.com/kitten) (See [#2504](https://github.com/urql-graphql/urql/pull/2504))
+3 -3
packages/storage-rn/package.json
··· 4 "sideEffects": false, 5 "description": "Graphcache offline storage for React Native", 6 "homepage": "https://formidable.com/open-source/urql/docs/", 7 - "bugs": "https://github.com/FormidableLabs/urql/issues", 8 "license": "MIT", 9 "repository": { 10 "type": "git", 11 - "url": "https://github.com/FormidableLabs/urql.git", 12 "directory": "packages/storage-rn" 13 }, 14 "keywords": [ 15 "urql", 16 "graphql client", 17 - "formidablelabs", 18 "exchanges", 19 "react native", 20 "offline",
··· 4 "sideEffects": false, 5 "description": "Graphcache offline storage for React Native", 6 "homepage": "https://formidable.com/open-source/urql/docs/", 7 + "bugs": "https://github.com/urql-graphql/urql/issues", 8 "license": "MIT", 9 "repository": { 10 "type": "git", 11 + "url": "https://github.com/urql-graphql/urql.git", 12 "directory": "packages/storage-rn" 13 }, 14 "keywords": [ 15 "urql", 16 "graphql client", 17 + "graphql", 18 "exchanges", 19 "react native", 20 "offline",
+4 -4
packages/storybook-addon/package.json
··· 3 "version": "2.0.1", 4 "description": "Make stories in Storybook with urql", 5 "sideEffects": false, 6 - "homepage": "https://github.com/FormidableLabs/urql/tree/main/packages/storybook-addon", 7 - "bugs": "https://github.com/FormidableLabs/urql/issues", 8 "license": "MIT", 9 "repository": { 10 "type": "git", 11 - "url": "https://github.com/FormidableLabs/urql.git", 12 "directory": "packages/storybook-addon" 13 }, 14 "keywords": [ 15 "addon", 16 "storybook", 17 "urql", 18 - "formidablelabs", 19 "preact", 20 "react", 21 "storybook-addon",
··· 3 "version": "2.0.1", 4 "description": "Make stories in Storybook with urql", 5 "sideEffects": false, 6 + "homepage": "https://github.com/urql-graphql/urql/tree/main/packages/storybook-addon", 7 + "bugs": "https://github.com/urql-graphql/urql/issues", 8 "license": "MIT", 9 "repository": { 10 "type": "git", 11 + "url": "https://github.com/urql-graphql/urql.git", 12 "directory": "packages/storybook-addon" 13 }, 14 "keywords": [ 15 "addon", 16 "storybook", 17 "urql", 18 + "graphql", 19 "preact", 20 "react", 21 "storybook-addon",
+3 -3
packages/svelte-urql/package.json
··· 4 "description": "A highly customizable and versatile GraphQL client for Svelte", 5 "sideEffects": false, 6 "homepage": "https://formidable.com/open-source/urql/docs/", 7 - "bugs": "https://github.com/FormidableLabs/urql/issues", 8 "license": "MIT", 9 "repository": { 10 "type": "git", 11 - "url": "https://github.com/FormidableLabs/urql.git", 12 "directory": "packages/svelte-urql" 13 }, 14 "keywords": [ 15 "graphql client", 16 "state management", 17 "cache", 18 - "formidablelabs", 19 "exchanges", 20 "svelte" 21 ],
··· 4 "description": "A highly customizable and versatile GraphQL client for Svelte", 5 "sideEffects": false, 6 "homepage": "https://formidable.com/open-source/urql/docs/", 7 + "bugs": "https://github.com/urql-graphql/urql/issues", 8 "license": "MIT", 9 "repository": { 10 "type": "git", 11 + "url": "https://github.com/urql-graphql/urql.git", 12 "directory": "packages/svelte-urql" 13 }, 14 "keywords": [ 15 "graphql client", 16 "state management", 17 "cache", 18 + "graphql", 19 "exchanges", 20 "svelte" 21 ],
+3 -3
packages/vue-urql/package.json
··· 4 "description": "A highly customizable and versatile GraphQL client for vue", 5 "sideEffects": false, 6 "homepage": "https://formidable.com/open-source/urql/docs/", 7 - "bugs": "https://github.com/FormidableLabs/urql/issues", 8 "license": "MIT", 9 "repository": { 10 "type": "git", 11 - "url": "https://github.com/FormidableLabs/urql.git", 12 "directory": "packages/vue-urql" 13 }, 14 "keywords": [ 15 "graphql client", 16 "state management", 17 "cache", 18 - "formidablelabs", 19 "exchanges", 20 "vue" 21 ],
··· 4 "description": "A highly customizable and versatile GraphQL client for vue", 5 "sideEffects": false, 6 "homepage": "https://formidable.com/open-source/urql/docs/", 7 + "bugs": "https://github.com/urql-graphql/urql/issues", 8 "license": "MIT", 9 "repository": { 10 "type": "git", 11 + "url": "https://github.com/urql-graphql/urql.git", 12 "directory": "packages/vue-urql" 13 }, 14 "keywords": [ 15 "graphql client", 16 "state management", 17 "cache", 18 + "graphql", 19 "exchanges", 20 "vue" 21 ],