How to use extract-files - 8 common examples

fetchFromRemoteEndpoint({ request, options }) {
    // Continue if uploads are possible
    if (typeof FormData !== 'undefined') {
      // Extract any files from the request variables
      const files = extractFiles(request.variables, 'variables')

      // Continue if there are files to upload
      if (files.length) {
        // Convert query AST to string for transport
        request.query = printAST(request.query)

        // Construct a multipart form
        const formData = new FormData()
        formData.append('operations', JSON.stringify(request))
        files.forEach(({ path, file }) => formData.append(path, file))

        // Send request
        return fetch(this._uri, {
          method: 'POST',
          body: formData,
          ...options

function getFetchOptions(operation) {
    const fetchOptions = {
      method: 'POST',
      headers: {
        ...opts.headers,
      },
      ...opts.fetchOptions,
    }

    const { clone, files } = extractFiles(operation)
    const operationJSON = JSON.stringify(clone)

    if (files.size) {
      // See the GraphQL multipart request spec:
      // https://github.com/jaydenseric/graphql-multipart-request-spec

      const form = new FormData()

      form.append('operations', operationJSON)

      const map = {}
      let i = 0
      files.forEach(paths => {
        map[++i] = paths
      })
      form.append('map', JSON.stringify(map))

headers: {
        // Client awareness headers are context overridable.
        ...(name && { 'apollographql-client-name': name }),
        ...(version && { 'apollographql-client-version': version }),
        ...headers
      }
    }

    const { options, body } = selectHttpOptionsAndBody(
      operation,
      fallbackHttpConfig,
      linkConfig,
      contextConfig
    )

    const { clone, files } = extractFiles(body)
    const payload = serializeFetchParameter(clone, 'Payload')

    if (files.size) {
      // Automatically set by fetch when the body is a FormData instance.
      delete options.headers['content-type']

      // GraphQL multipart request spec:
      // https://github.com/jaydenseric/graphql-multipart-request-spec

      const form = new FormData()

      form.append('operations', payload)

      const map = {}
      let i = 0
      files.forEach(paths => {

getFetchOptions(operation, fetchOptionsOverrides = {}) {
    const fetchOptions = {
      method: 'POST',
      headers: {
        ...this.headers
      },
      ...this.fetchOptions,
      ...fetchOptionsOverrides
    }

    if (fetchOptions.method === 'GET') {
      return fetchOptions
    }

    const { clone, files } = extractFiles(
      operation,
      '',
      isExtractableFileEnhanced
    )
    const operationJSON = JSON.stringify(clone)

    if (files.size) {
      // See the GraphQL multipart request spec:
      // https://github.com/jaydenseric/graphql-multipart-request-spec

      if (!this.FormData) {
        throw new Error(
          'GraphQLClient: FormData must be polyfilled or passed in new GraphQLClient({ FormData })'
        )
      }

fetchFromRemoteEndpoint({ request, options }) {
    // Continue if uploads are possible
    if (typeof FormData !== 'undefined') {
      // Extract any files from the request variables

      const files = extractFiles(request.variables, 'variables')

      // Continue if there are files to upload
      if (files.length) {
        // Convert query AST to string for transport
        request.query = printAST(request.query)

        // Construct a multipart form
        const formData = new FormData()
        // formData.append('operations', JSON.stringify(request))
        formData.append('query', request.query)
        formData.append('operationName', request.operationName)
        files.forEach(({ path, file }) => {
          formData.append(path, file)
          request.variables[path.replace("variables.", "")] = path
        })
        formData.append('variables', JSON.stringify(request.variables))

export function uploadMiddleware(query: IQuery, request: RequestInit, next: () => void) {
  if (!query || !query.variables || !request.headers) return next();
  const { clone, files } = extractFiles({variables: query.variables});
  if (files.size === 0) return next();

  delete request.headers['content-type'];

  // GraphQL multipart request spec:
  // https://github.com/jaydenseric/graphql-multipart-request-spec
  const form = new FormData();
  form.append('operations', BSON.stringify({query: (isGQL(query.query)) ? query.query.loc.source.body : query.query, variables: clone.variables}));

  const map = {};
  let i     = 0;
  files.forEach((paths: string) => {
    map[++i] = paths;
  });
  form.append('map', JSON.stringify(map));

(files, request, index) =>
          files.concat(extractFiles(request.variables, `${index}.variables`)),
        []

    ({ variables }) => extractFiles(cloneDeep(variables)).length > 0,
    createUploadLink({ uri, credentials: 'include' }),