Fetch Asset

fetchAsset is a simple utility function for loading assets from a url. It returns a promise that resolves when the asset loads meaning you can use it with libraries such as SWR or react-query which suspend whilst the asset loads.

We recommend reading more about assets in the Loading Assets guide.

Usage

️💡

You do not need to use fetchAsset directly, the useAsset hook is recommended for most use cases.

If you just want a simple loading hook, you can simply wrap fetchAsset in a custom hook.

use-asset.jsx


import { fetchAsset } from '@playcanvas/react/utils'
 
const useAsset = (url, type) => {
    const app = useApp()
    const [asset, setAsset] = useState(null)
 
    useEffect(() => {
        fetchAsset({ app, url, type }).then(setAsset)
    }, [url])
 
    return asset
}
 
const Container = (( src )) => {
 
    const model = useAsset(src, 'container')
    if(!model) return null
 
    return (<Entity {...props}>
        <Render asset={model} />
    </Entity>)
}

API Reference

Name	Type	Default
`app`	`Application` The PlayCanvas application instance. When loading an asset it will be scoped to this application. The asset can’t be re-used across different applications.
`url`	`string` The URL of the asset to fetch.
`type`	`string` The type of the asset to fetch.
`props`	`Record<string, unknown>` Props passed to the asset. This is spread into the `file` `data` and `options` properties of the asset.	`{}`
`onProgress`	`(meta: AssetMeta) => void` A callback function that is called to provide loading progress.