feat(exchanges): add binding for @urql/multipart-fetch-exchange (#242)

Author: parkerziegler

__tests__/Client_test.res

@@ -208,4 +208,21 @@ describe("Client", () => {
       open Expect
       expect(client) |> toMatchSnapshot
     }))
+
+  describe("Ecosystem exchanges", () => {
+    it("should support passing the multipartFetchExchange", () => {
+      let client = Client.make(
+        ~url="https://localhost:3000",
+        ~exchanges=[
+          Client.Exchanges.dedupExchange,
+          Client.Exchanges.cacheExchange,
+          Client.Exchanges.multipartFetchExchange,
+        ],
+        (),
+      )
+
+      open Expect
+      expect(client) |> toMatchSnapshot
+    })
+  })
 })

__tests__/__snapshots__/Client_test.bs.js.snap

@@ -151,6 +151,30 @@ Client {
 }
 `;
 
+exports[`Client Ecosystem exchanges should support passing the multipartFetchExchange 1`] = `
+Client {
+  "activeOperations": Object {},
+  "createOperationContext": [Function],
+  "createRequestOperation": [Function],
+  "dispatchOperation": [Function],
+  "executeMutation": [Function],
+  "executeQuery": [Function],
+  "executeSubscription": [Function],
+  "fetch": undefined,
+  "fetchOptions": undefined,
+  "maskTypename": false,
+  "operations$": [Function],
+  "preferGetMethod": false,
+  "queue": Array [],
+  "reexecuteOperation": [Function],
+  "requestPolicy": "cache-first",
+  "results$": [Function],
+  "subscribeToDebugTarget": [Function],
+  "suspense": false,
+  "url": "https://localhost:3000",
+}
+`;
+
 exports[`Client ssrExchange should exist and be callable 1`] = `[Function]`;
 
 exports[`Client with custom fetch implementation should accept a custom fetch implementation 1`] = `

docs/exchanges.md

@@ -4,19 +4,23 @@ Exchanges are the mechanism by which `reason-urql` modifies requests before they
 
 The `Exchanges` `module` is a submodule of the `Client` module and can be referenced at `ReasonUrql.Client.Exchanges`. The following exchanges are provided out of the box with `reason-urql`.
 
-#### `cacheExchange`
+## Core Exchanges
+
+`urql` ships with a set of core exchanges that are baked right into `@urql/core` and can be referenced safely in `reason-urql` without installing any additional packages. These are detailed below.
+
+### `cacheExchange`
 
 The `cacheExchange` provides basic caching support for your GraphQL operations. It is of type `Exchanges.t`.
 
-#### `dedupExchange`
+### `dedupExchange`
 
 The `dedupExchange` will deduplicate pending operations waiting for a response. For example, if a user attempts to execute the same query by clicking a button in rapid succession, the `dedupExchange` will filter these events to a single request. It is of type `Exchanges.t`.
 
-#### `fetchExchange`
+### `fetchExchange`
 
 The `fetchExchange` is responsible for actually sending your request to your GraphQL API and handling the response. It is of type `Exchanges.t`.
 
-#### `defaultExchanges`
+### `defaultExchanges`
 
 The above three exchanges make up `urql`'s `defaultExchanges`. When you create a client in `reason-urql` these exchanges are already applied by default. If you specify an `exchanges` array, be sure to include the specific exchanges you need. You almost always want the `defaultExchanges`, so make sure to include them using `Array.concat` or `Array.append`.
 
@@ -37,11 +41,11 @@ let client = Client.(
 );
 ```
 
-#### `debugExchange`
+### `debugExchange`
 
 The `debugExchange` is useful for tracking how operations are passing through the exchanges pipeline. It simply logs all incoming and outgoing operations to the console. Be sure to remove this in production! It is of type `Exchanges.t`.
 
-#### `subscriptionExchange`
+### `subscriptionExchange`
 
 The `subscriptionExchange` should be used in the event that you intend to support GraphQL subscriptions in your application through use of `useSubscription` or the client's `executeSubscription` method.
 
@@ -79,7 +83,7 @@ let client = Client.(
 );
 ```
 
-#### `ssrExchange`
+### `ssrExchange`
 
 The `ssrExchange` accepts a single optional argument, `~ssrExchangeParams`, a record with two fields:
 
@@ -133,11 +137,43 @@ let extractedData = Client.Exchanges.restoreData(~exchange=ssrCache, ~restore=ur
 
 This part of the API is still quite experimental, as server-side rendering in Reason with Next.js is still in its infancy. Use with caution. For more information, read `urql`'s server-side rendering guide [here](https://github.com/FormidableLabs/urql/blob/master/docs/basics.md#server-side-rendering). To see an example of server-side rendering with `reason-urql`, check out our [`reason-urql-ssr` example](https://github.com/parkerziegler/reason-urql-ssr).
 
-#### `composeExchanges`
+### `composeExchanges`
 
 `composeExchanges` is a helper function that will compose a single exchange function from an array of exchanges. Operations will be run through the provided exchanges in the order that they were provided to `composeExchanges`.
 
-### Custom Exchanges
+## Ecosystem Exchanges
+
+In addition to the core exchanges exposed by `@urql/core`, `urql` also supports more abstracted exchanges that meet particular needs that may or may not be critical to your use case. In contrast to the core exchanges, these ecosystem exchanges should be used when you have a specific use case that warrants them. Many of these exchanges require additional packages to be installed. `reason-urql` is in the process of adding bindings for these exchanges; if the ecosystem exchange you're interested in isn't outlined below, the bindings may not have yet been implemented. Community contributions are very welcome in this space!
+
+### `multipartFetchExchange`
+
+The `multipartFetchExchange` builds on the `fetchExchange` but adds additional functionality for multipart file uploads. It should replace the use of the `fetchExchange` if you need to support traditional fetches and multipart file uploads.
+
+To use the `multipartFetchExchange`, add the package to your dependencies:
+
+```sh
+yarn add @urql/exchange-multipart-fetch
+```
+
+Then, substitute the `fetchExchange` with the `multipartFetchExchange`:
+
+```res
+open ReasonUrql
+
+let client = Client.make(
+  ~url="http://localhost:3000",
+  ~exchanges=[|
+    Client.Exchanges.dedupExchange,
+    Client.Exchanges.cacheExchange,
+    Client.Exchanges.multipartFetchExchange
+  |],
+  ()
+)
+```
+
+Read more on the `multipartFetchExchange` [here](https://github.com/FormidableLabs/urql/tree/main/exchanges/multipart-fetch).
+
+## Custom Exchanges
 
 `reason-urql` also allows you to write your own exchanges to modify outgoing GraphQL requests and incoming responses. To read up on the basics of exchanges, check out the excellent [`urql` documentation](https://formidable.com/open-source/urql/docs/concepts/exchanges/).
 

package.json

@@ -34,6 +34,7 @@
     "@babel/plugin-transform-modules-commonjs": "^7.12.1",
     "@glennsl/bs-jest": "^0.6.0",
     "@reasonml-community/graphql-ppx": "^1.0.1",
+    "@urql/exchange-multipart-fetch": "^0.1.11",
     "all-contributors-cli": "^6.19.0",
     "babel-jest": "^26.6.3",
     "bs-platform": "^8.3.2",

src/Client.res

@@ -70,6 +70,10 @@ module Exchanges = {
   @module("urql")
   external defaultExchanges: array<t> = "defaultExchanges"
 
+  /* Ecosystem exchanges. */
+  @module("@urql/exchange-multipart-fetch")
+  external multipartFetchExchange: t = "multipartFetchExchange"
+
   /* Specific types for the subscriptionExchange. */
   type observerLike<'value> = {
     next: 'value => unit,

src/Client.resi

@@ -52,6 +52,10 @@ module Exchanges: {
   @module("urql")
   external defaultExchanges: array<t> = "defaultExchanges"
 
+  /* Ecosystem exchanges. */
+  @module("@urql/exchange-multipart-fetch")
+  external multipartFetchExchange: t = "multipartFetchExchange"
+
   /* Specific types for the subscriptionExchange. */
   type observerLike<'value> = {
     next: 'value => unit,