How to integrate with @sanity/image-url?

[mornir]

Hey!
I was hoping I could use the createClient to configure the client for the @sanity/image-url package, but it doesn't work 🤔
What the best/cleanest of using @sanity/image-url with the Nuxt sanity-module?

// Nuxt plugin
import imageUrlBuilder from '@sanity/image-url'
import { createClient } from '@nuxtjs/sanity'

const configSanity = {
  projectId: 'tufjlt9c',
  dataset: 'production',
}

const client = createClient(configSanity)
const builder = imageUrlBuilder(client)

function urlFor(source) {
  return builder.image(source)
}

export default (context, inject) => {
  inject('urlFor', urlFor)
}

<img :src="$urlFor(movie.poster)" :alt="movie.title + ' poster'" />

[danielroe]

Try this:

// Nuxt plugin
import imageUrlBuilder from '@sanity/image-url'

const configSanity = {
  projectId: 'tufjlt9c',
  dataset: 'production',
}

export default ({ $sanity }, inject) => {
  const builder = imageUrlBuilder($sanity.client)

  function urlFor(source) {
    return builder.image(source)
  }

  inject('urlFor', urlFor)
}

There is also <SanityImage> which has support for fully renderless behaviour.

[mornir]

thanks for the quick response 😃
but still no luck: https://github.com/mornir/movies-web/blob/master/plugins/image-builder.js
When logging, I can see that the client was initialized.

(I'd like to use the crop & hotspot feature of the Studio, which I assume SanityImage can't render)

[mornir]

I'm using the minimal client (piconsanity). I tried using @sanity/client, but I get the following error, although I have it installed:

[danielroe]

@mornir That's a bug - give me a sec.

[danielroe]

@mornir Try with v0.3.7 - should correctly detect @sanity/client

[mornir]

Nice! The warning is gone, but now I get this error:

 ERROR   /

server.js:612
      useOfficialClient = !!(/*require.resolve*/)(33);        
                                                ^

SyntaxError: Unexpected token ')'
    at new Script (vm.js:88:7)
    at C:\projects\movies-web\node_modules\vue-server-renderer\build.prod.js:1:77446
    at o (C:\projects\movies-web\node_modules\vue-server-renderer\build.prod.js:1:77509)
    at C:\projects\movies-web\node_modules\vue-server-renderer\build.prod.js:1:78172
    at new Promise (<anonymous>)
    at C:\projects\movies-web\node_modules\vue-server-renderer\build.prod.js:1:78080
    at Object.renderToString (C:\projects\movies-web\node_modules\vue-server-renderer\build.prod.js:1:81615)
    at SSRRenderer.render (C:\projects\movies-web\node_modules\@nuxt\vue-renderer\dist\vue-renderer.js:3822:38)

[mornir]

The error occurs when setting the client to minimal.

[danielroe]

Apologies for that. Let's try v0.3.8.

[mornir]

@danielroe Thanks for the quick fix!
!!((process.client || process.server) ? require.resolveWeak('@sanity/client') : require('@sanity/client'))😵😄

Back to my original question:
Initializing the image builder with context.$sanity works when using minimal: false, but not with minimal: true, which is odd, because this does work:

import sanity from 'picosanity'
import imageUrlBuilder from '@sanity/image-url'

const client = sanity({
  projectId: 'tufjlt9c',
  dataset: 'production',
})

const builder = imageUrlBuilder(client)
const urlFor = (source) => builder.image(source).auto('format')

export default (context, inject) => {
  inject('urlFor', urlFor)
}

[danielroe]

@mornir I'll need to look into the image URL builder. I think I recall it is only requesting the client to get the configuration, which it's assuming is available - as it doesn't need to perform any fetches.

[danielroe]

Answer is don't pass in the client, just the config, which image builder supports as well. Or we can modify the minimal client to return its config via the clientConfig

See https://www.github.com/sanity-io/image-url/tree/master/src%2Fbuilder.ts

[mornir]

Oh I see 😯
yeah, the following plugin would be neat. Are there any downsides in exposing the client config like this?

import imageUrlBuilder from '@sanity/image-url'
export default ({ $sanity }, inject) => {
  const builder = imageUrlBuilder($sanity) // image-url will automatically look for the clientConfig key, right?
  function urlFor(source) {
    return builder.image(source)
  }
  inject('urlFor', urlFor)
}

Now I'm importing the Sanity config from the Nuxt config:

import imageUrlBuilder from '@sanity/image-url'
import config from '../nuxt.config.js'

export default (context, inject) => {
  const builder = imageUrlBuilder(config.sanity)
  function urlFor(source) {
    return builder.image(source)
  }
  inject('urlFor', urlFor)
}

I had to explicitly set dataset to production for it to work (although it's the default value).

Now that I think about it, the best would be that the nuxt-sanity plugin provides the urlFor image helper globally.

[danielroe]

I propose exposing the config like so:

import imageUrlBuilder from '@sanity/image-url'
export default ({ $sanity }, inject) => {
  const builder = imageUrlBuilder($sanity.config)

  function urlFor(source) {
    return builder.image(source)
  }

  inject('urlFor', urlFor)
}

I'm reluctant to embed @sanity/image-url as it will increase the bundle size by 7Kb (parsed JS) when not everyone will use it.

[mornir]

Good for me 👍

[danielroe]

... now usable in v0.3.9

[mornir]

Thanks!