18.0.1 • Published 5 months ago

apollo-upload-client v18.0.1

Weekly downloads
847,039
License
MIT
Repository
github
Last release
5 months ago

Apollo upload logo

apollo-upload-client

A terminating Apollo Link for Apollo Client that fetches a GraphQL multipart request if the GraphQL variables contain files (by default FileList, File, or Blob instances), or else fetches a regular GraphQL POST or GET request (depending on the config and GraphQL operation).

Installation

To install with npm, run:

npm install apollo-upload-client

Polyfill any required globals (see Requirements) that are missing in your server and client environments.

Remove any uri, credentials, or headers options from the ApolloClient constructor.

Apollo Client can only have 1 terminating Apollo Link that sends the GraphQL requests; if one such as HttpLink is already setup, remove it.

Initialize the client with a terminating Apollo Link using the function createUploadLink.

Also ensure the GraphQL server implements the GraphQL multipart request spec and that uploads are handled correctly in resolvers.

Examples

Use FileList, File, or Blob instances anywhere within query or mutation variables to send a GraphQL multipart request.

See also the example API and client.

FileList

import { gql, useMutation } from "@apollo/client";

const MUTATION = gql`
  mutation ($files: [Upload!]!) {
    uploadFiles(files: $files) {
      success
    }
  }
`;

function UploadFiles() {
  const [mutate] = useMutation(MUTATION);

  return (
    <input
      type="file"
      multiple
      required
      onChange={({ target: { validity, files } }) => {
        if (validity.valid)
          mutate({
            variables: {
              files,
            },
          });
      }}
    />
  );
}

File

import { gql, useMutation } from "@apollo/client";

const MUTATION = gql`
  mutation ($file: Upload!) {
    uploadFile(file: $file) {
      success
    }
  }
`;

function UploadFile() {
  const [mutate] = useMutation(MUTATION);

  return (
    <input
      type="file"
      required
      onChange={({
        target: {
          validity,
          files: [file],
        },
      }) => {
        if (validity.valid)
          mutate({
            variables: {
              file,
            },
          });
      }}
    />
  );
}

Blob

import { gql, useMutation } from "@apollo/client";

const MUTATION = gql`
  mutation ($file: Upload!) {
    uploadFile(file: $file) {
      success
    }
  }
`;

function UploadFile() {
  const [mutate] = useMutation(MUTATION);

  return (
    <input
      type="text"
      required
      onChange={({ target: { validity, value } }) => {
        if (validity.valid) {
          const file = new Blob([value], { type: "text/plain" });

          // Optional, defaults to `blob`.
          file.name = "text.txt";

          mutate({
            variables: {
              file,
            },
          });
        }
      }}
    />
  );
}

Requirements

Consider polyfilling:

Projects must configure TypeScript to use types from the ECMAScript modules that have a // @ts-check comment:

Exports

The npm package apollo-upload-client features optimal JavaScript module design. It doesn’t have a main index module, so use deep imports from the ECMAScript modules that are exported via the package.json field exports:

@yelm/next-apollo@sirclo/nexusboilerplate-nextjs-apollo-styledc-antdtest-srcl-tdk@productfy/commonapp-campussingle-page-appgamestackbitguild-blockchain-sdkphoenix-shareddevelapp-regional-frontend@stefancfuchs/firefly-chat-widget-2vouched-nodejs@toptal/staff-portal@topkit/apollo-clientcress-ui@joseirrazabal/links@joseirrazabal/kit@gomoko/admin-ui@weblake.io/pwa@kaviar/x-uipe-layouts@seung_gumon/event-tool@waroio/waro-packagedriver-webreact-brand@echidna/ui@vimbu/storybookpriceit@rickie/cli@nosebit/rickie-cli@eten-lab/discussion-box@bytebean/admin-uienvelink2@everything-registry/sub-chunk-1154luxrobo-text-editor2@itoa/app-admin-uireact-admin-rokket-providersreact-dinamic-content@lyno/client-helpers@maanex/nuxt-apollo-upload@lorado/nuxtjs_apollo@ludo.ninja/api@k6js/core@k6js/ks-next@keystone-next/app-admin-ui-legacy@keystone-next/keystone@keystonejs/app-admin-ui@keystone-6/core@keystone-alpha/admin-ui@keystone-alpha/app-admin-ui@keystone-6-master/core@koikorn/app-admin-ui@in-order/io-ui@jhnnsrs/mikro@jordanwade/react-embed-widget@ishop/admin-uipubsweet-client@jovensgeniosengineering/vue-cli-plugin-apollopylon-app@janda-com/resv-module@janda-com/resv-module--leisure@janda-com/sms@jayway/tds@liyibass/admin-ui@liyibass/app-admin-ui@graphapps/charts@graphapps/graphpanel@grafee/client@mdwelsh/fixie@minso_minso/vue-cli-plugin-apollo@junglebet/apollo-clientthreeddd-plus-editor-new@trackunit/react-core-contexts@simonkberg/reason-apollo@signallabs/admin@things-real/shell@threedddplus/customizer@threedddplus/logoeditor@threedddplus/threedddplus-sdkit-custom-admin-ui-app@shipnity/components@shipnity/template@uponcommerce/admin-uirune-games-clisapien-v2-frontendsat-srclz-tdksat-srclz-tdk2rg-quill-editor@operato/graphql@pakwoon/graphql-client@ocopjs/app-admin-ui@voussoir/admin-uivsmart-courseware-tools@workerhive/clientvue-cli-plugin-apollovue-cli-plugin-apollo-graphql-wsvue-cli-plugin-apollo-without-regenerator-runtime@vendx/admin-ui@vendure.ecommerce/admin-ui
18.0.1

5 months ago

18.0.0

5 months ago

17.0.0

2 years ago

16.0.0

3 years ago

15.0.0

3 years ago

14.1.3

3 years ago

14.1.2

4 years ago

14.1.1

4 years ago

14.1.0

4 years ago

14.0.1

4 years ago

14.0.0

4 years ago

13.0.0

4 years ago

12.0.0

4 years ago

12.1.0

4 years ago

11.0.0

5 years ago

10.0.1

5 years ago

10.0.0

5 years ago

9.1.0

5 years ago

9.0.0

5 years ago

8.1.0

6 years ago

8.0.0

6 years ago

7.1.0

6 years ago

7.1.0-alpha.2

6 years ago

7.1.0-alpha.1

6 years ago

7.0.0-alpha.4

6 years ago

7.0.0-alpha.3

6 years ago

7.0.0-alpha.2

6 years ago

7.0.0-alpha.1

6 years ago

6.0.3

6 years ago

6.0.2

6 years ago

6.0.1

6 years ago

6.0.0

6 years ago

6.0.0-beta.3

6 years ago

6.0.0-beta.2

6 years ago

6.0.0-beta.1

6 years ago

5.1.1

7 years ago

5.1.0

7 years ago

5.0.0

7 years ago

5.0.0-alpha.1

7 years ago

4.1.1

7 years ago

4.1.0

7 years ago

4.1.0-alpha.2

7 years ago

4.1.0-alpha.1

7 years ago

4.0.7

7 years ago

4.0.6

7 years ago

4.0.5

7 years ago

4.0.4

7 years ago

4.0.3

7 years ago

4.0.2

7 years ago

4.0.1

7 years ago

4.0.0

7 years ago

3.0.3

7 years ago

3.0.2

7 years ago

3.0.1

7 years ago

3.0.0

7 years ago

2.0.2

7 years ago

2.0.1

7 years ago

2.0.0

7 years ago

1.0.2

7 years ago

1.0.1

7 years ago

1.0.0

7 years ago