6.0.0 • Published 7 months ago

@envelop/preload-assets v6.0.0

Weekly downloads
-
License
MIT
Repository
github
Last release
7 months ago

@envelop/preload-assets

Inject a function for registering assets that should be preloaded on the client. The registered assets will be added under the extensions.preloadAssets key on the execution result.

On your client network layer you can register a handler for preloading the given resources as soon as the operation result is arriving on the client!

Getting Started

yarn add @envelop/preload-assets
import { execute, makeExecutableSchema, parse, specifiedRules, subscribe, validate } from 'graphql'
import { envelop, useEngine } from '@envelop/core'
import { usePreloadAssets } from '@envelop/preload-asset'

const schema = makeExecutableSchema({
  typeDefs: /* GraphQL */ `
    type Query {
      imageUrl: String!
    }
  `,
  resolvers: {
    Query: {
      imageUrl: (_: unknown, __: unknown, context: any) => {
        const imageUrl = 'https://localhost/some-asset.png'
        context.registerPreloadAsset(imageUrl)
        return Promise.resolve(imageUrl)
      }
    }
  }
})

const getEnveloped = envelop({
  plugins: [useEngine({ parse, validate, specifiedRules, execute, subscribe }), usePreloadAssets()]
})

Example response

{
  "data": {
    "imageUrl": "https://localhost/some-asset.png"
  },
  "extensions": {
    "preloadAssets": ["https://localhost/some-asset.png"]
  }
}

Example client prefetch logic

const preloadAsset = url => {
  var request = new XMLHttpRequest()
  request.open('GET', url)
  request.responseType = 'blob'
  request.onload = () => {
    if (request.status !== 200) {
      console.error(new Error(`Image preload failed; error code '${request.statusText}'.`))
    }
  }
  request.onerror = () => {
    console.error(new Error(`There was a network error while preloading '${url}'.`))
  }
  request.send()
}

// call this function with the execution result within your network layer.
const onExecutionResult = result => {
  if (Array.isArray(result?.extensions?.preloadAssets)) {
    result.extension.preloadAssets.forEach(url => {
      preloadAsset(url)
    })
  }
}
5.0.3

8 months ago

5.0.2

8 months ago

5.0.1

9 months ago

6.0.0

7 months ago

4.0.5

1 year ago

4.0.6

1 year ago

5.0.0

1 year ago

4.0.4

1 year ago

4.0.1

2 years ago

4.0.0

2 years ago

4.0.3

2 years ago

4.0.2

2 years ago

3.6.0

2 years ago

3.5.0

2 years ago

3.4.0

2 years ago

3.4.2

2 years ago

3.4.1

2 years ago

3.3.3

2 years ago

3.3.2

2 years ago

3.3.1

2 years ago

3.3.0

2 years ago

3.2.0

2 years ago

2.0.0

2 years ago

3.0.0

2 years ago

3.1.0

2 years ago

1.2.0

3 years ago

1.2.1

3 years ago

1.1.0

3 years ago

1.0.2

3 years ago

1.0.1

3 years ago

1.0.0

3 years ago

0.1.1

3 years ago

0.1.0

3 years ago

0.0.2

3 years ago

0.0.0

3 years ago

0.0.1

3 years ago