{"id":13724377,"url":"https://github.com/jaydenseric/apollo-upload-client","last_synced_at":"2025-05-13T22:10:41.856Z","repository":{"id":37359657,"uuid":"82990102","full_name":"jaydenseric/apollo-upload-client","owner":"jaydenseric","description":"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).","archived":false,"fork":false,"pushed_at":"2024-04-24T09:01:41.000Z","size":481,"stargazers_count":1541,"open_issues_count":5,"forks_count":154,"subscribers_count":17,"default_branch":"master","last_synced_at":"2025-05-08T19:54:20.742Z","etag":null,"topics":["apollo","apollo-client","graphql","maintained","node","npm","react","react-native"],"latest_commit_sha":null,"homepage":"https://npm.im/apollo-upload-client","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jaydenseric.png","metadata":{"files":{"readme":"readme.md","changelog":"changelog.md","contributing":null,"funding":".github/funding.yml","license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":"jaydenseric"}},"created_at":"2017-02-24T01:52:30.000Z","updated_at":"2025-05-07T01:55:10.000Z","dependencies_parsed_at":"2024-11-06T18:00:51.561Z","dependency_job_id":"094cfaba-9c87-4ecf-b06d-42bd4c26662b","html_url":"https://github.com/jaydenseric/apollo-upload-client","commit_stats":{"total_commits":411,"total_committers":22,"mean_commits":"18.681818181818183","dds":0.1046228710462287,"last_synced_commit":"234a72799616481e874d219e9edd9fc7b7993857"},"previous_names":[],"tags_count":61,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jaydenseric%2Fapollo-upload-client","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jaydenseric%2Fapollo-upload-client/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jaydenseric%2Fapollo-upload-client/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jaydenseric%2Fapollo-upload-client/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jaydenseric","download_url":"https://codeload.github.com/jaydenseric/apollo-upload-client/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253154974,"owners_count":21862622,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["apollo","apollo-client","graphql","maintained","node","npm","react","react-native"],"created_at":"2024-08-03T01:01:55.995Z","updated_at":"2025-05-13T22:10:41.832Z","avatar_url":"https://github.com/jaydenseric.png","language":"JavaScript","readme":"![Apollo upload logo](https://cdn.jsdelivr.net/gh/jaydenseric/apollo-upload-client@1.0.0/apollo-upload-logo.svg)\n\n# apollo-upload-client\n\nA [terminating Apollo Link](https://www.apollographql.com/docs/react/api/link/introduction/#the-terminating-link) for [Apollo Client](https://www.apollographql.com/docs/react) that fetches a [GraphQL multipart request](https://github.com/jaydenseric/graphql-multipart-request-spec) if the GraphQL variables contain files (by default [`FileList`](https://developer.mozilla.org/en-US/docs/Web/API/FileList), [`File`](https://developer.mozilla.org/en-US/docs/Web/API/File), or [`Blob`](https://developer.mozilla.org/en-US/docs/Web/API/Blob) instances), or else fetches a regular [GraphQL POST or GET request](https://www.apollographql.com/docs/apollo-server/workflow/requests) (depending on the config and GraphQL operation).\n\n- [Installation](#installation)\n- [Examples](#examples)\n- [Requirements](#requirements)\n- [Exports](#exports)\n\n## Installation\n\nTo install with [npm](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm), run:\n\n```sh\nnpm install apollo-upload-client\n```\n\nPolyfill any required globals (see [_**Requirements**_](#requirements)) that are missing in your server and client environments.\n\nRemove any `uri`, `credentials`, or `headers` options from the [`ApolloClient` constructor](https://www.apollographql.com/docs/react/api/core/ApolloClient/#the-apolloclient-constructor).\n\n[Apollo Client](https://www.apollographql.com/docs/react) can only have 1 [terminating Apollo Link](https://www.apollographql.com/docs/react/api/link/introduction/#the-terminating-link) that sends the GraphQL requests; if one such as [`HttpLink`](https://www.apollographql.com/docs/react/api/link/apollo-link-http) is already setup, remove it.\n\nInitialize the client with a [terminating Apollo Link](https://www.apollographql.com/docs/react/api/link/introduction/#the-terminating-link) using the function [`createUploadLink`](./createUploadLink.mjs).\n\nAlso 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.\n\n## Examples\n\nUse [`FileList`](https://developer.mozilla.org/en-US/docs/Web/API/FileList), [`File`](https://developer.mozilla.org/en-US/docs/Web/API/File), or [`Blob`](https://developer.mozilla.org/en-US/docs/Web/API/Blob) instances anywhere within query or mutation variables to send a [GraphQL multipart request](https://github.com/jaydenseric/graphql-multipart-request-spec).\n\nSee also the [example API and client](https://github.com/jaydenseric/apollo-upload-examples).\n\n### [`FileList`](https://developer.mozilla.org/en-US/docs/Web/API/FileList)\n\n```jsx\nimport { gql, useMutation } from \"@apollo/client\";\n\nconst MUTATION = gql`\n  mutation ($files: [Upload!]!) {\n    uploadFiles(files: $files) {\n      success\n    }\n  }\n`;\n\nfunction UploadFiles() {\n  const [mutate] = useMutation(MUTATION);\n\n  return (\n    \u003cinput\n      type=\"file\"\n      multiple\n      required\n      onChange={({ target: { validity, files } }) =\u003e {\n        if (validity.valid)\n          mutate({\n            variables: {\n              files,\n            },\n          });\n      }}\n    /\u003e\n  );\n}\n```\n\n### [`File`](https://developer.mozilla.org/en-US/docs/Web/API/File)\n\n```jsx\nimport { gql, useMutation } from \"@apollo/client\";\n\nconst MUTATION = gql`\n  mutation ($file: Upload!) {\n    uploadFile(file: $file) {\n      success\n    }\n  }\n`;\n\nfunction UploadFile() {\n  const [mutate] = useMutation(MUTATION);\n\n  return (\n    \u003cinput\n      type=\"file\"\n      required\n      onChange={({\n        target: {\n          validity,\n          files: [file],\n        },\n      }) =\u003e {\n        if (validity.valid)\n          mutate({\n            variables: {\n              file,\n            },\n          });\n      }}\n    /\u003e\n  );\n}\n```\n\n### [`Blob`](https://developer.mozilla.org/en-US/docs/Web/API/Blob)\n\n```jsx\nimport { gql, useMutation } from \"@apollo/client\";\n\nconst MUTATION = gql`\n  mutation ($file: Upload!) {\n    uploadFile(file: $file) {\n      success\n    }\n  }\n`;\n\nfunction UploadFile() {\n  const [mutate] = useMutation(MUTATION);\n\n  return (\n    \u003cinput\n      type=\"text\"\n      required\n      onChange={({ target: { validity, value } }) =\u003e {\n        if (validity.valid) {\n          const file = new Blob([value], { type: \"text/plain\" });\n\n          // Optional, defaults to `blob`.\n          file.name = \"text.txt\";\n\n          mutate({\n            variables: {\n              file,\n            },\n          });\n        }\n      }}\n    /\u003e\n  );\n}\n```\n\n## Requirements\n\n- [Node.js](https://nodejs.org) versions `^18.15.0 || \u003e=20.4.0`.\n- Browsers matching the [Browserslist](https://browsersl.ist) query [`\u003e 0.5%, not OperaMini all, not dead`](https://browsersl.ist/?q=%3E+0.5%25%2C+not+OperaMini+all%2C+not+dead).\n\nConsider polyfilling:\n\n- [`AbortController`](https://developer.mozilla.org/en-US/docs/Web/API/AbortController)\n- [`fetch`](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API)\n- [`FormData`](https://developer.mozilla.org/en-US/docs/Web/API/FormData)\n\nProjects must configure [TypeScript](https://www.typescriptlang.org) to use types from the ECMAScript modules that have a `// @ts-check` comment:\n\n- [`compilerOptions.allowJs`](https://www.typescriptlang.org/tsconfig#allowJs) should be `true`.\n- [`compilerOptions.maxNodeModuleJsDepth`](https://www.typescriptlang.org/tsconfig#maxNodeModuleJsDepth) should be reasonably large, e.g. `10`.\n- [`compilerOptions.module`](https://www.typescriptlang.org/tsconfig#module) should be `\"node16\"` or `\"nodenext\"`.\n\n## Exports\n\nThe [npm](https://npmjs.com) package [`apollo-upload-client`](https://npm.im/apollo-upload-client) features [optimal JavaScript module design](https://jaydenseric.com/blog/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`](./package.json) field [`exports`](https://nodejs.org/api/packages.html#exports):\n\n- [`createUploadLink.mjs`](./createUploadLink.mjs)\n- [`formDataAppendFile.mjs`](./formDataAppendFile.mjs)\n- [`isExtractableFile.mjs`](./isExtractableFile.mjs)\n","funding_links":["https://github.com/sponsors/jaydenseric"],"categories":["JavaScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjaydenseric%2Fapollo-upload-client","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjaydenseric%2Fapollo-upload-client","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjaydenseric%2Fapollo-upload-client/lists"}