The best way to use the Sanity Client from within the new Studio

[franknoirot]

I was wondering what the path for using the client from within the studio was when the part system is gone?

Under V2 whenever I needed to query some content for use in odd places where no client was passed into the context I needed it, I would import from the parts system like so:

import sanityClient from 'part:@sanity/base/client'

const client = sanityClient.withConfig({ apiVersion: '2022-06-17' })

Now there is a new useClient React hook, but I'm not sure the best way to use the client within the Studio when I don't have a React component. My specific example is as follows: I am making an Initial Value Template for creating a Product entry based on a given Product Category's ID field value. I want to scaffold out some data based on content within the Category, but I need to fetch the document based on that ID in order to do so. The TODO comments below show where I'd like to fetch and make use of a document with the client.

// sanity.config.js

export default createConfig({
  // ...more configuration above
  document: {
      newDocumentOptions: (prev, {currentUser, creationContext}) => {
        const verticalCategoryId = 'cebd3e27-22cc-44db-9603-5fdaf1695f8d'
  
        // TODO get the product options defined within the category to use below
  
        return [
          ...prev,
          {
            id: 'productByCategorySingle',
            templateId: 'product-by-category',
            type: 'initialValueTemplateItem',
            title: 'Vertical Photography',
            parameters: {
              categoryId: verticalCategoryId,
              variants: [] // TODO: scaffold out the variants based on product options 
            },
          },
        ]
      }
    }
}

I could definitely import the client the same way I would from a frontend application, but I figure I should check best practices since I'm already in the Studio context. Thanks!

[geball]

Hi Frank. It looks like the v3 team has recommended using dependency injection, instantiating the store in a useMemo with the client as a dependency. However, they also mentioned that they're considering a way to wrap the entire studio, so that recommendation above may eventually change.

[rexxars]

Depends where/how you want to do it. Are you wanting to do it from initial values? If so, initialValue can be defined as a function - the second argument is a context that contains a getClient() method:

{
  name: 'categories',
  type: 'array',
  of: [{type: 'reference', to: [{type: 'category'}]}],
  initialValue: (params, context) => {
    const client = context.getClient({apiVersion: '2022-11-01'})
    return client.fetch('*[_type == "category"]{_ref: _id, _key: _id}')
  }
}

If you're doing it from a custom input component or other React component, you can use the useClient hook:

import {useClient} from 'sanity'

function MyComponent() {
  const client = useClient({apiVersion: '2022-11-01'})
  // do something with the client
}

[16n]

thank you very much - I did not know that I can return a Promise for the initialValue. This is exactly what I was looking for.

[franknoirot]

The newDocumentOptions should receive both client and currentUser within the context, just as you suggested @franknoirot - however the resolver cannot currently return an asynchronous value. That is an interesting use case however, so we'll look into if we can add support for that.

@rexxars am I understanding the most recent v3.7.0 release notes correctly that you've solved my original question with the new getClient() hook? Or is not being able to return asynchronous values from that resolver still the main limiting factor?

[rexxars]

Unfortunately the new document options resolver is still synchronous - this release only adds a getClient() function (not a React hook) to a specific context - the one passed to reference resolvers.