Skip to content

Commit b063a90

Browse files
parkerzieglerparkerziegler
authored andcommitted
docs: add final documentation updates for v3.
1 parent c2fb94e commit b063a90

26 files changed

+2855
-6243
lines changed

CHANGELOG.md

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,14 @@ All notable changes to this project will be documented in this file.
55
The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
66
and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
77

8+
## [3.0.0-rc.0] - 2020-11-12
9+
10+
This release is the first release candidate for v3.0.0, which will use `@reasonml-community/graphql-ppx` as our PPX preprocessor for GraphQL operations. Breaking changes will be listed in the release notes for the first stable release of v3.0.0.
11+
12+
### Diff
13+
14+
https://github.com/FormidableLabs/reason-urql/compare/v2.1.0...v3.0.0-rc.0
15+
816
## [2.1.0] - 2020-09-17
917

1018
This release brings our `urql` dependency up to v1.10.0, at parity with the current state of `urql` 🙌. There are no code changes involved from the previous RC release.

README.md

Lines changed: 18 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -28,23 +28,37 @@ Reason bindings for Formidable's Universal React Query Library, [`urql`](https:/
2828

2929
## 💾 Installation
3030

31-
#### 1. Install `reason-urql` and its `peerDependencies`.
31+
### 1. Install `reason-urql` and its `peerDependencies`.
3232

3333
```sh
3434
yarn add reason-urql urql graphql
3535
```
3636

3737
We try to keep our bindings as close to latest `urql` as possible. However, `urql` tends to make releases a bit ahead of `reason-urql`. To get a compatible version, we recommend always staying strictly within this project's `peerDependency` range for `urql`.
3838

39-
#### 2. Add `@reasonml-community/graphql-ppx`.
39+
#### 1a. **Important note for users of `bs-platform>=8.0.0`**.
40+
41+
If using `bs-platform>=8.0.0` you'll need to use [`yarn resolutions`](https://classic.yarnpkg.com/en/docs/selective-version-resolutions/) to specify a specific version of `wonka` to resolve. `urql` has an explicit dependency on latest `wonka` `v4`, which is incompatible with `bs-platform>=8.0.0`. See [this issue](https://github.com/kitten/wonka/issues/85) for more details.
42+
43+
In your `package.json`, add the following:
44+
45+
```json
46+
"resolutions": {
47+
"wonka": "5.0.0-rc.1"
48+
}
49+
```
50+
51+
If you're using `npm`, you may need to stay on `[email protected]` until `urql` takes a dependency on `wonka>=5.0.0`.
52+
53+
### 2. Add `@reasonml-community/graphql-ppx`.
4054

4155
To get the most out of compile time type checks for your GraphQL queries, mutations, and subscriptions, we use [`@reasonml-community/graphql-ppx`](https://github.com/reasonml-community/graphql-ppx). Add this to your project's `devDependencies`.
4256

4357
```sh
4458
yarn add @reasonml-community/graphql-ppx --dev
4559
```
4660

47-
#### 3. Update `bsconfig.json`.
61+
### 3. Update `bsconfig.json`.
4862

4963
Add `reason-urql`, `wonka`, and `@reasonml-community/graphql-ppx` to your `bs-dependencies` and `@reasonml-community/graphql-ppx/ppx` to your `ppx_flags` in `bsconfig.json`.
5064

@@ -59,7 +73,7 @@ Add `reason-urql`, `wonka`, and `@reasonml-community/graphql-ppx` to your `bs-de
5973
}
6074
```
6175

62-
#### 4. Send an introspection query to your API.
76+
### 4. Send an introspection query to your API.
6377

6478
Finally, you'll need to send an introspection query to your GraphQl API, using a tool like [`graphql-cli`](https://github.com/Urigo/graphql-cli/). You should generate a file called `graphql_schema.json` at the root of your project that `graphql-ppx` can use to type check your queries. **You should check this file into version control** and keep it updated as your API changes.
6579

docs/client-and-provider.md

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -151,7 +151,7 @@ module GetAllDogs = [%graphql
151151
152152
Client.executeQuery(~client, ~query=(module GetAllDogs), ())
153153
|> Wonka.subscribe((. data) => {
154-
switch(Client.(data.response)) {
154+
switch(Types.(data.response)) {
155155
| Data(d) => /* Access data returned from executing the request. */
156156
| Error(e) => /* Access any errors returned from executing the request. */
157157
| Empty => /* Fallback if neither Data nor Error return information. */
@@ -188,7 +188,7 @@ module GetAllDogs = [%graphql
188188
189189
Client.query(~client, ~query=(module GetAllDogs), ())
190190
|> Js.Promise.then_(data => {
191-
switch(Client.(data.response)) {
191+
switch(Types.(data.response)) {
192192
| Data(d) => /* Access data returned from executing the request. */
193193
| Error(e) => /* Access any errors returned from executing the request. */
194194
| Empty => /* Fallback if neither Data nor Error return information. */
@@ -241,7 +241,7 @@ module LikeDog = [%graphql
241241
242242
Client.executeMutation(~client, ~mutation=(module LikeDog), LikeDog.{ key: "VmeRTX7j-" })
243243
|> Wonka.subscribe((. data) => {
244-
switch(Client.(data.response)) {
244+
switch(Types.(data.response)) {
245245
| Data(d) => /* Access data returned from executing the request. */
246246
| Error(e) => /* Access any errors returned from executing the request. */
247247
| Empty => /* Fallback if neither Data nor Error return information. */
@@ -278,7 +278,7 @@ module LikeDog = [%graphql
278278
279279
Client.mutation(~client, ~mutation=(module LikeDog), LikeDog.{ key: "VmeRTX7j-" })
280280
|> Js.Promise.then_(data => {
281-
switch (Client.(data.response)) {
281+
switch (Types.(data.response)) {
282282
| Data(d) => /* Access data returned from executing the request. */
283283
| Error(e) => /* Access any errors returned from executing the request. */
284284
| Empty => /* Fallback if neither Data nor Error return information. */
@@ -326,7 +326,7 @@ module SubscribeMessages = [%graphql
326326
327327
Client.executeSubscription(~client, ~subscription=(module SubscribeMessages), ())
328328
|> Wonka.subscribe((. data) => {
329-
switch(Client.(data.response)) {
329+
switch(Types.(data.response)) {
330330
| Data(d) => /* Access data returned from executing the request. */
331331
| Error(e) => /* Access any errors returned from executing the request. */
332332
| Empty => /* Fallback if neither Data nor Error return information. */

docs/error.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ switch (response) {
2727
Depending on the types of errors you get from your GraphQL API, you may want to do different things. Here's an example showing how to handle `networkError`s and `graphQLErrors` indepedently.
2828

2929
```reason
30-
let ({ response }, _) = useQuery(~request, ());
30+
let ({ response }, _) = useQuery(~query=(module MyQuery), ());
3131
3232
switch (response) {
3333
| Error(e) =>

docs/getting-started.md

Lines changed: 19 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -4,19 +4,19 @@ This document well help you get started with `reason-urql`. It picks up right wh
44

55
## Setting Up the Client
66

7-
To get started with `reason-urql`, the first thing you'll want to do is create your client. Your client is the core orchestrator of communication with your GraphQL API, handling all outgoing requests and incoming responses. To create a client, simply call the `make` function from the `Client` module.
7+
To get started with `reason-urql`, the first thing you'll want to do is create your client. Your client is the core orchestrator of communication with your GraphQL API, handling all outgoing requests and incoming responses. To create a client, call the `make` function from the `Client` module.
88

99
```reason
1010
open ReasonUrql;
1111
1212
let client = Client.make(~url="https://mygraphqlapi.com/graphql", ());
1313
```
1414

15-
The `client` accepts a few other configuration options, including `fetchOptions` and `exchanges`, but only `url` is required. By default, `reason-urql` will apply `urql`'s `defaultExchanges` if no exchanges are provided; this will include the `fetchExchange` for executing requests, the `cacheExchange` for caching responses from your API, and the `dedupExchange` for deduplicating in-flight requests. It will also apply standard fetch options if no `fetchOptions` argument is provided, using `POST` as the request method and `application/json` as the `Content-Type` header. We'll see later how to work with these options.
15+
The `client` accepts a few other configuration options, including `fetchOptions` and `exchanges`, but only `url` is required. By default, `reason-urql` will apply `urql`'s `defaultExchanges` if no exchanges are provided; this will include the `fetchExchange` for executing requests, the `cacheExchange` for caching responses from your API, and the `dedupExchange` for deduplicating in-flight requests. It will also apply standard fetch options if no `fetchOptions` argument is provided, using `POST` as the HTTP method and `application/json` as the `Content-Type` header. We'll see later how to work with these options.
1616

1717
## Linking Client with Provider
1818

19-
Once you have your `Client` setup, you'll need to pass it to your `Provider`, which should wrap the root level of your application. This allows `reason-urql`'s hooks to access the `Client` to execute operations lower down in your React tree.
19+
Once you have your `Client` setup, you'll need to pass it to your `Provider`, which should wrap the root level of your application. This allows `reason-urql`'s hooks to access the `Client` in order to execute operations lower down in your React tree.
2020

2121
```reason
2222
open ReasonUrql;
@@ -52,11 +52,9 @@ module DogsQuery = [%graphql
5252
5353
[@react.component]
5454
let make = () => {
55-
/* Build your request by calling .make on your query. */
56-
let request = DogsQuery.make();
57-
58-
/* Pass the request to useQuery. */
59-
let (Hooks.{ response }, executeQuery) = Hooks.useQuery(~request, ());
55+
/* Pass the graphql-ppx module as a first-class module to useQuery. */
56+
let (Hooks.{response}, executeQuery)
57+
= Hooks.useQuery(~query=(module DogsQuery), ());
6058
6159
/* Pattern match on the response variant.
6260
This variant has constructors for Fetching, Data(d), PartialData(d, e) Error(e), and Empty. */
@@ -65,11 +63,11 @@ let make = () => {
6563
| Data(d)
6664
| PartialData(d, _) => {
6765
Array.map(dog =>
68-
<div key=dog##key>
69-
<span> {j|$dog##name $dog##likes|j}->React.string </span>
70-
<span> dog##breed->React.string <span>
66+
<div key=dog.key>
67+
<span> {j|$dog.name $dog.likes|j}->React.string </span>
68+
<span> dog.breed->React.string <span>
7169
</div>,
72-
d##dogs
70+
d.dogs
7371
)
7472
}
7573
| Error(e) =>
@@ -82,11 +80,11 @@ let make = () => {
8280
}
8381
```
8482

85-
Sweet 😎! We've executed a query with our `useQuery` hook. Notice that we didn't have to write _any_ types to get 💯% type inference and type safety on the response. We use type information included in the query module you pass to `useQuery` to ensure that you're using the data returned by your query in a fully safe way.
83+
Sweet 😎! We've executed a query with our `useQuery` hook. Notice that we didn't have to write _any_ types to get 💯% type inference and type safety on the response. We use type information included in the query module you pass to `useQuery` to ensure that you're using the data returned by your query in a fully type-safe way.
8684

8785
## Can I See an Example?
8886

89-
Check out the example in `examples/2-query` to see a more involved example of using `useQuery`, in addition to `reason-urql`'s `Query` component.
87+
Check out the example in `examples/2-query` to see a more involved example of using `useQuery`.
9088

9189
## Writing Your First Mutation
9290

@@ -112,13 +110,11 @@ module LikeDogMutation = [%graphql
112110
113111
[@react.component]
114112
let make = (~key: string) => {
115-
/* Build your request by calling .make on your mutation, passing variables as labeled arguments. */
116-
let request = LikeDogMutation.make(~key, ());
117-
118113
/* Pass the request to useMutation. */
119-
let (_, executeMutation) = Hooks.useMutation(~request);
114+
let (_, executeMutation) =
115+
Hooks.useMutation(~mutation=(module LikeDogMutation));
120116
121-
<button onClick={_e => executeMutation() |> ignore}>
117+
<button onClick={_e => executeMutation({key}) |> ignore}>
122118
"Execute the Mutation (and Reward a Good Dog)"->React.string
123119
</button>
124120
}
@@ -133,14 +129,12 @@ open ReasonUrql;
133129
134130
[@react.component]
135131
let make = (~key: string) => {
136-
/* Build your request by calling .make on your mutation, passing variables as labeled arguments. */
137-
let request = LikeDogMutation.make(~key, ());
138-
139132
/* Pass the request to useMutation. */
140-
let (Hooks.{ response }, executeMutation) = Hooks.useMutation(~request);
133+
let (Hooks.{response}, executeMutation)
134+
= Hooks.useMutation(~mutation=(module LikeDogMutation));
141135
142136
let button = React.useMemo1(() =>
143-
<button onClick={_e => executeMutation() |> ignore}>
137+
<button onClick={_e => executeMutation({key}) |> ignore}>
144138
"Execute the Mutation (and Reward a Good Dog)"->React.string
145139
</button>,
146140
[|executeMutation|]
@@ -165,4 +159,4 @@ let make = (~key: string) => {
165159

166160
## Can I See an Example?
167161

168-
Check out the example in `examples/3-mutation` to see a more involved example of using `useMutation`, in addition to `reason-urql`'s `Mutation` component.
162+
Check out the example in `examples/3-mutation` to see a more involved example of using `useMutation`.

0 commit comments

Comments
 (0)