Hello everyone, can anyone tell me how to access document data from within the structure builder? ```import client from "@sanity/client" client.getDocument('tags').then(tags...

6 replies
Last updated: Dec 22, 2020
Hello everyone,can anyone tell me how to access document data from within the structure builder?

import client from "@sanity/client"

client.getDocument('tags').then(tags => {
    console.log(`${tags.tagArray}`)
})
i get the error message:
TypeError: _client.default.getDocument is not a function
at Object.<anonymous> (/static/js/app.bundle.js
:180469:17) at __webpack_require__ (/static/js/vendor.bundle.js
:713:30) at fn (/static/js/vendor.bundle.js
:118:20) at loadStructure (/static/js/app.bundle.js
:179724:15) at DeskTool.derivePanes (/static/js/app.bundle.js
:401564:56) at DeskTool.derivePanes (/static/js/app.bundle.js
:441377:25) at DeskTool.componentDidMount (/static/js/app.bundle.js
:401673:10) at DeskTool.componentDidMount (/static/js/app.bundle.js
:441367:123) at commitLifeCycles (/static/js/vendor.bundle.js
:23112:22) at commitLayoutEffects (/static/js/vendor.bundle.js
:26101:7)
AI Update

The issue you're encountering is that you're trying to import and use the Sanity client incorrectly within the Structure Builder. The getDocument method doesn't exist directly on the client import - you need to properly instantiate the client first.

Here's how to fix it:

Option 1: Create a properly configured client instance

import {createClient} from '@sanity/client'

const client = createClient({
  projectId: 'your-project-id',
  dataset: 'your-dataset',
  useCdn: false, // Use false for fresh data in the Studio
  apiVersion: '2024-01-01' // Use current date
})

client.fetch(`*[_id == "tags"][0]`).then(tags => {
  console.log(tags.tagArray)
})

Option 2: Use the client that's already available in Studio context

If you're working within a Structure Builder configuration file, you can access the client through the context:

import {structureTool} from 'sanity/structure'

export default {
  plugins: [
    structureTool({
      structure: (S, context) => {
        // Access client from context
        const {getClient} = context
        const client = getClient({apiVersion: '2024-01-01'})
        
        // Now fetch your data
        client.fetch(`*[_id == "tags"][0]`).then(tags => {
          console.log(tags.tagArray)
        })
        
        return S.list()
          .title('Content')
          .items([...])
      }
    })
  ]
}

Important notes:

  1. The method is fetch() not getDocument() - you query documents using GROQ queries
  2. You need to properly configure the client with your projectId, dataset, and apiVersion
  3. When working in the Studio context, it's better to use the client from the context rather than creating a new instance
  4. For Structure Builder, check out the Structure Builder documentation for more examples of dynamic content loading

The createClient function is the correct way to instantiate the Sanity Client, which then gives you access to methods like fetch() for querying your content.

The default export of
@sanity/client
is a sanity client constructor, not a singleton. You need to construct a client, then you can access its documents
See the introductory example on how to construct one https://www.sanity.io/docs/js-client
well that helps, thanks a lot
import client from 'part:@sanity/base/client
will do the trick 🙂
import client from 'part:@sanity/base/client
will do the trick 🙂
Here's another example using observables to make the structure real-time https://github.com/sanity-io/sanity-recipes/blob/master/snippets/deskStructureWithRoles.js

Sanity – Build the way you think, not the way your CMS thinks

Sanity is the developer-first content operating system that gives you complete control. Schema-as-code, GROQ queries, and real-time APIs mean no more workarounds or waiting for deployments. Free to start, scale as you grow.

Was this answer helpful?