diff --git a/.size-limit.json b/.size-limit.json index 738af22..f2c4597 100644 --- a/.size-limit.json +++ b/.size-limit.json @@ -1,6 +1,6 @@ [ { "limit": "1.5 KB", - "ignore": ["apollo-link", "apollo-link-http-common"] + "ignore": ["@apollo/client"] } ] diff --git a/changelog.md b/changelog.md index 6144fb6..b909228 100644 --- a/changelog.md +++ b/changelog.md @@ -6,6 +6,7 @@ - Updated Node.js support to `^10.17.0 || ^12.0.0 || >= 13.7.0`. - Updated dependencies, some of which (only dev dependencies) require newer Node.js versions than previously supported. +- Support [`@apollo/client`](https://npm.im/@apollo/client) v3, fixing [#174](https://github.com/jaydenseric/apollo-upload-client/issues/174) via [#175](https://github.com/jaydenseric/apollo-upload-client/pull/175/files). ### Patch @@ -401,7 +402,7 @@ ## 3.0.0 -- Support `apollo-upload-server` v2 and [query batching](https://apollographql.com/docs/apollo-server/requests#batching). +- Support `apollo-upload-server` v2 and [query batching](https://apollographql.com/docs/apollo-server/requests/#batching). - Removed the seemingly redundant `Accept` header from requests. - Clearer package description. diff --git a/package.json b/package.json index be9065e..7ac29a6 100644 --- a/package.json +++ b/package.json @@ -34,12 +34,12 @@ }, "browserslist": "Node 10.17 - 11 and Node < 11, Node 12 - 13 and Node < 13, Node >= 13.7, > 0.5%, not OperaMini all, not dead", "peerDependencies": { - "graphql": "^0.11.3 || ^0.12.3 || ^0.13.0 || ^14.0.0 || ^15.0.0" + "graphql": "14 - 15", + "subscriptions-transport-ws": "^0.9.0" }, "dependencies": { + "@apollo/client": "^3.0.0", "@babel/runtime": "^7.10.3", - "apollo-link": "^1.2.14", - "apollo-link-http-common": "^0.2.16", "extract-files": "^8.1.0" }, "devDependencies": { diff --git a/readme.md b/readme.md index bcabffe..4756d6f 100644 --- a/readme.md +++ b/readme.md @@ -4,7 +4,7 @@ [![npm version](https://badgen.net/npm/v/apollo-upload-client)](https://npm.im/apollo-upload-client) [![CI status](https://github.com/jaydenseric/apollo-upload-client/workflows/CI/badge.svg)](https://github.com/jaydenseric/apollo-upload-client/actions) -A terminating [Apollo Link](https://apollographql.com/docs/link) for [Apollo Client](https://apollographql.com/docs/link/#apollo-client) that allows [`FileList`](https://developer.mozilla.org/en-US/docs/Web/API/FileList), [`File`](https://developer.mozilla.org/en-US/docs/Web/API/File), [`Blob`](https://developer.mozilla.org/en-US/docs/Web/API/Blob) or [`ReactNativeFile`](#class-reactnativefile) instances within query or mutation variables and sends [GraphQL multipart requests](https://github.com/jaydenseric/graphql-multipart-request-spec). +A [terminating Apollo Link](https://apollographql.com/docs/link/overview/#terminating-links) for [Apollo Client](https://apollographql.com/docs/react) that allows [`FileList`](https://developer.mozilla.org/en-US/docs/Web/API/FileList), [`File`](https://developer.mozilla.org/en-US/docs/Web/API/File), [`Blob`](https://developer.mozilla.org/en-US/docs/Web/API/Blob) or [`ReactNativeFile`](#class-reactnativefile) instances within query or mutation variables and sends [GraphQL multipart requests](https://github.com/jaydenseric/graphql-multipart-request-spec). ## Setup @@ -14,11 +14,11 @@ Install with [npm](https://npmjs.com): npm install apollo-upload-client ``` -[Apollo Boost](https://npm.im/apollo-boost) doesn’t allow link customization; if you are using it [migrate to a manual Apollo Client setup](https://apollographql.com/docs/react/migrating/boost-migration). +Remove any `uri`, `credentials`, or `headers` options from the [`ApolloClient` constructor](https://www.apollographql.com/docs/react/api/core/ApolloClient/#the-apolloclient-constructor). -[Apollo Client](https://apollographql.com/docs/link/#apollo-client) can only have 1 “terminating” [Apollo Link](https://apollographql.com/docs/link) that sends the GraphQL requests; if one such as [`apollo-link-http`](https://apollographql.com/docs/link/links/http) is already setup, remove it. +[Apollo Client](https://apollographql.com/docs/react) can only have 1 [terminating Apollo Link](https://apollographql.com/docs/link/overview/#terminating-links) that sends the GraphQL requests; if one such as [`HttpLink`](https://apollographql.com/docs/link/links/http) is already setup, remove it. -Initialize the client with a terminating link using [`createUploadLink`](#function-createuploadlink). +Initialize the client with a [terminating Apollo Link](https://apollographql.com/docs/link/overview/#terminating-links) using [`createUploadLink`](#function-createuploadlink). Also ensure the GraphQL server implements the [GraphQL multipart request spec](https://github.com/jaydenseric/graphql-multipart-request-spec) and that uploads are handled correctly in resolvers. @@ -31,8 +31,7 @@ See also the [example API and client](https://github.com/jaydenseric/apollo-uplo ### [`FileList`](https://developer.mozilla.org/en-US/docs/Web/API/FileList) ```jsx -const { useMutation } = require('@apollo/react-hooks'); -const gql = require('graphql-tag'); +const { gql, useMutation } = require('@apollo/client'); const MUTATION = gql` mutation($files: [Upload!]!) { @@ -56,8 +55,7 @@ function UploadFiles() { ### [`File`](https://developer.mozilla.org/en-US/docs/Web/API/File) ```jsx -const { useMutation } = require('@apollo/react-hooks'); -const gql = require('graphql-tag'); +const { gql, useMutation } = require('@apollo/client'); const MUTATION = gql` mutation($file: Upload!) { @@ -86,8 +84,7 @@ function UploadFile() { ### [`Blob`](https://developer.mozilla.org/en-US/docs/Web/API/Blob) ```jsx -const { useMutation } = require('@apollo/react-hooks'); -const gql = require('graphql-tag'); +const { gql, useMutation } = require('@apollo/client'); const MUTATION = gql` mutation($file: Upload!) { @@ -170,7 +167,7 @@ _A React Native file that can be used in query or mutation variables._ ### function createUploadLink -Creates a terminating [Apollo Link](https://apollographql.com/docs/link) capable of file uploads. +Creates a [terminating Apollo Link](https://apollographql.com/docs/link/overview/#terminating-links) capable of file uploads. The link matches and extracts files in the GraphQL operation. If there are files it uses a [`FormData`](https://developer.mozilla.org/en-US/docs/Web/API/FormData) instance as the [`fetch`](https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/fetch) `options.body` to make a [GraphQL multipart request](https://github.com/jaydenseric/graphql-multipart-request-spec), otherwise it sends a regular POST request. @@ -189,7 +186,7 @@ Some of the options are similar to the [`createHttpLink` options](https://apollo | `options.headers` | object? | Merges with and overrides `options.fetchOptions.headers`. | | `options.includeExtensions` | boolean? = `false` | Toggles sending `extensions` fields to the GraphQL server. | -**Returns:** ApolloLink — A terminating [Apollo Link](https://apollographql.com/docs/link) capable of file uploads. +**Returns:** ApolloLink — A [terminating Apollo Link](https://apollographql.com/docs/link/overview/#terminating-links) capable of file uploads. #### See @@ -201,8 +198,7 @@ Some of the options are similar to the [`createHttpLink` options](https://apollo _A basic Apollo Client setup._ > ```js -> const { ApolloClient } = require('apollo-client'); -> const { InMemoryCache } = require('apollo-cache-inmemory'); +> const { ApolloClient, InMemoryCache } = require('@apollo/client'); > const { createUploadLink } = require('apollo-upload-client'); > > const client = new ApolloClient({ diff --git a/src/index.js b/src/index.js index 4127e86..842484c 100644 --- a/src/index.js +++ b/src/index.js @@ -1,14 +1,15 @@ 'use strict'; -const { ApolloLink, Observable } = require('apollo-link'); const { + ApolloLink, + Observable, selectURI, selectHttpOptionsAndBody, fallbackHttpConfig, serializeFetchParameter, createSignalIfSupported, parseAndCheckHttpResponse, -} = require('apollo-link-http-common'); +} = require('@apollo/client'); const { extractFiles, isExtractableFile, @@ -134,7 +135,7 @@ function formDataAppendFile(formData, fieldName, file) { exports.formDataAppendFile = formDataAppendFile; /** - * Creates a terminating [Apollo Link](https://apollographql.com/docs/link) + * Creates a [terminating Apollo Link](https://apollographql.com/docs/link/overview/#terminating-links) * capable of file uploads. * * The link matches and extracts files in the GraphQL operation. If there are @@ -158,11 +159,10 @@ exports.formDataAppendFile = formDataAppendFile; * @param {string} [options.credentials] Overrides `options.fetchOptions.credentials`. * @param {object} [options.headers] Merges with and overrides `options.fetchOptions.headers`. * @param {boolean} [options.includeExtensions=false] Toggles sending `extensions` fields to the GraphQL server. - * @returns {ApolloLink} A terminating [Apollo Link](https://apollographql.com/docs/link) capable of file uploads. + * @returns {ApolloLink} A [terminating Apollo Link](https://apollographql.com/docs/link/overview/#terminating-links) capable of file uploads. * @example A basic Apollo Client setup. * ```js - * const { ApolloClient } = require('apollo-client'); - * const { InMemoryCache } = require('apollo-cache-inmemory'); + * const { ApolloClient, InMemoryCache } = require('@apollo/client'); * const { createUploadLink } = require('apollo-upload-client'); * * const client = new ApolloClient({