apollo-upload-client

Apollo Client 的终止 Apollo 链接,如果 GraphQL 变量包含文件(默认情况下为 FileList、File、Blob 或 ReactNativeFile 实例),则会获取 GraphQL 多部分请求,否则会获取常规 GraphQL POST 或 GET 请求(取决于配置和 GraphQL 操作)。「A terminating Apollo Link for Apollo Client that fetches a GraphQL multipart request if the GraphQL variables contain files (by default FileList, File, Blob, or ReactNativeFile instances), or else fetches a regular GraphQL POST or GET request (depending on the config and GraphQL operation).」

Github stars Tracking Chart

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:

Main metrics

Overview
Name With Ownerjaydenseric/apollo-upload-client
Primary LanguageJavaScript
Program languageJavaScript (Language Count: 1)
Platform
License:
所有者活动
Created At2017-02-24 01:52:30
Pushed At2024-04-24 09:01:41
Last Commit At2023-10-24 20:55:56
Release Count61
Last Release Namev18.0.1 (Posted on )
First Release Namev1.0.0 (Posted on )
用户参与
Stargazers Count1.5k
Watchers Count17
Fork Count156
Commits Count478
Has Issues Enabled
Issues Count311
Issue Open Count4
Pull Requests Count24
Pull Requests Open Count1
Pull Requests Close Count22
项目设置
Has Wiki Enabled
Is Archived
Is Fork
Is Locked
Is Mirror
Is Private