@operato/graphql 10.29.27 → 10.29.37

package/package.json

@@ -2,7 +2,7 @@
   "name": "@operato/graphql",
   "description": "Webcomponent graphql-client following open-wc recommendations",
   "author": "heartyoh@hatiolab.com",
-  "version": "10.29.27",
+  "version": "10.29.37",
   "type": "module",
   "main": "dist/src/index.js",
   "module": "dist/src/index.js",
@@ -23,6 +23,7 @@
     "./gql-context.js": "./dist/src/gql-context.js",
     "./graphql-client.js": "./dist/src/graphql-client.js",
     "./graphql-env.js": "./dist/src/graphql-env.js",
+    "./upload-progress.js": "./dist/src/upload-progress.js",
     "./json-to-graphql-query.js": "./dist/src/json-to-graphql-query.js",
     "./ox-input-graphql": "./dist/src/input/ox-input-graphql"
   },
@@ -60,7 +61,7 @@
   "dependencies": {
     "@apollo/client": "^3.6.9",
     "@operato/i18n": "^10.29.27",
-    "@operato/utils": "^10.29.23",
+    "@operato/utils": "^10.29.37",
     "apollo-upload-client": "^18.0.0",
     "graphql-tag": "^2.12.6",
     "graphql-ws": "^5.14.0",
@@ -124,5 +125,5 @@
       "prettier --write"
     ]
   },
-  "gitHead": "aa70087b5929f12cec0506c19f1aec0a83610a79"
+  "gitHead": "38361a65226ee9f23814747b4f0520edf42c3184"
 }

package/test/upload-progress.test.ts

@@ -0,0 +1,156 @@
+import { expect } from '@open-wc/testing'
+import gql from 'graphql-tag'
+
+import { execute } from '@apollo/client/core/index.js'
+
+import { getClientLink } from '../src/graphql-env.js'
+import { uploadContext, uploadFetch } from '../src/upload-progress.js'
+
+/**
+ * Upload progress.
+ *
+ * ## Why this is tested
+ *
+ * Only XHR can tell how much of a body went out, so an upload that asks for progress leaves `fetch`.
+ * What must hold:
+ *
+ * ```
+ * unchanged     a request that does not ask for progress — every query, every plain upload — still
+ *               goes through fetch with the same arguments; no XHR is made
+ * progress      an upload that asks gets fractions up to 1, and the same Response fetch would give
+ * credentials   the session cookie still goes (credentials: include → withCredentials)
+ * abort         the link's abort stops the XHR and fails like an aborted fetch
+ * ```
+ */
+
+class FakeXHR {
+  static made: FakeXHR[] = []
+
+  method = ''
+  url = ''
+  withCredentials = false
+  headers: Record<string, string> = {}
+  body: any
+  aborted = false
+  status = 200
+  statusText = 'OK'
+  responseText = '{"data":{"attach":{"id":"1"}}}'
+  upload: { onprogress?: (e: any) => void } = {}
+  onload?: () => void
+  onerror?: () => void
+  onabort?: () => void
+
+  constructor() {
+    FakeXHR.made.push(this)
+  }
+  open(method: string, url: string) {
+    this.method = method
+    this.url = url
+  }
+  setRequestHeader(name: string, value: string) {
+    this.headers[name] = value
+  }
+  getAllResponseHeaders() {
+    return 'content-type: application/json\r\nx-one: 1\r\n'
+  }
+  send(body: any) {
+    this.body = body
+    setTimeout(() => {
+      this.upload.onprogress?.({ lengthComputable: true, loaded: 50, total: 100 })
+      this.onload?.()
+    })
+  }
+  abort() {
+    this.aborted = true
+    this.onabort?.()
+  }
+}
+
+describe('upload progress', () => {
+  const realXHR = window.XMLHttpRequest
+  const realFetch = window.fetch
+  let fetched: any[]
+
+  beforeEach(() => {
+    FakeXHR.made = []
+    fetched = []
+    ;(window as any).XMLHttpRequest = FakeXHR
+    window.fetch = (async (...args: any[]) => {
+      fetched.push(args)
+      return new Response('{"data":{"one":1}}', { status: 200, headers: { 'content-type': 'application/json' } })
+    }) as any
+  })
+
+  afterEach(() => {
+    window.XMLHttpRequest = realXHR
+    window.fetch = realFetch
+  })
+
+  it('leaves a request without progress to fetch, as it was', async () => {
+    const init = { method: 'POST', body: 'x', credentials: 'include' as RequestCredentials }
+    await uploadFetch('/graphql', init)
+
+    expect(FakeXHR.made.length).to.equal(0)
+    expect(fetched.length).to.equal(1)
+    expect(fetched[0][0]).to.equal('/graphql')
+    expect(fetched[0][1]).to.deep.equal(init)
+  })
+
+  it('reports progress and answers with the response fetch would give', async () => {
+    const fractions: number[] = []
+    const response = await uploadFetch('/graphql', {
+      method: 'POST',
+      credentials: 'include',
+      headers: { 'Apollo-Require-Preflight': 'true' },
+      body: 'form',
+      onUploadProgress: (fraction: number) => fractions.push(fraction)
+    } as any)
+
+    const xhr = FakeXHR.made[0]
+    expect(xhr.withCredentials, 'the session cookie stays home').to.equal(true)
+    expect(xhr.headers['apollo-require-preflight']).to.equal('true')
+    expect(xhr.body).to.equal('form')
+    expect(fractions).to.deep.equal([0.5, 1])
+
+    expect(response.status).to.equal(200)
+    expect(response.headers.get('x-one')).to.equal('1')
+    expect(await response.json()).to.deep.equal({ data: { attach: { id: '1' } } })
+  })
+
+  it('stops the upload when aborted', async () => {
+    const controller = new AbortController()
+    const sent = uploadFetch('/graphql', { method: 'POST', body: 'form', signal: controller.signal, onUploadProgress: () => {} } as any)
+
+    controller.abort()
+
+    const error = await sent.then(
+      () => null,
+      e => e
+    )
+    expect(FakeXHR.made[0].aborted).to.equal(true)
+    expect(error?.name).to.equal('AbortError')
+  })
+
+  it('sends a query through fetch and an upload with progress through XHR', async () => {
+    const run = (operation: any) =>
+      new Promise((resolve, reject) => execute(getClientLink(), operation).subscribe({ next: resolve, error: reject }))
+
+    await run({ query: gql`query { one }` })
+    expect(fetched.length, 'a query left fetch').to.equal(1)
+    expect(FakeXHR.made.length, 'a query went through XHR').to.equal(0)
+
+    const fractions: number[] = []
+    const file = new File(['abc'], 'a.pdf', { type: 'application/pdf' })
+    const result: any = await run({
+      query: gql`mutation ($file: Upload!) { attach(file: $file) { id } }`,
+      variables: { file },
+      context: uploadContext(fraction => fractions.push(fraction))
+    })
+
+    expect(fetched.length, 'the upload went through fetch').to.equal(1)
+    expect(FakeXHR.made.length).to.equal(1)
+    expect(FakeXHR.made[0].body).to.be.instanceOf(FormData)
+    expect(fractions).to.deep.equal([0.5, 1])
+    expect(result.data.attach.id).to.equal('1')
+  })
+})