Get help on Discord

Discussion about creating and rendering documents in Sanity Studio using the HTTP API and `S.documentList()`.

106 replies
Last updated: Apr 21, 2021
what does it mean?
AI Update

I'd love to help you understand something about Sanity, but your question "what does it mean?" doesn't specify what you're asking about.

Could you provide more context? For example, are you asking about:

  • A specific error message you're seeing?
  • A term or concept in the Sanity documentation (like "Content Lake", "GROQ", "perspectives", etc.)?
  • A piece of code or configuration you're working with?
  • A feature name you've encountered?

Once you provide more details about what you'd like explained, I'll be happy to give you a clear answer with relevant documentation and examples!

my code

export default () =>
  S.list()
    .title('Content')
    .items([
      S.listItem()
        .title('Gestione Categorie')
        .child(async () => {
          const { data: categories } = await getCategories();
          return categories?.map((element) =>
            S.document()
              .title(carTypes[element])
              .documentId(`category-${element.toLowerCase()}`)
              .schemaType('categoriesSettings')
          );
        }),
      // Add a visual divider (optional)d
      S.divider(),
      // List out the rest of the document types, but filter out the config type
      ...S.documentTypeListItems().filter(
        (listItem) => !['categoriesSettings'].includes(listItem.getId())
      ),
    ]);
It looks like your 
S.document()
doesn’t have a 
.schemaType()
assigned.
but it’s wrong
user A
but it’s not true 😐
sa you can see in the code
Yes, I see. Just trying to get the same thing going in my code.
this is my code
import S from '@sanity/desk-tool/structure-builder';
import carTypes from './static/categories';
import axios from 'axios';
import { IGetCategoryResponse } from '../server/src/controllers/getCategoriesController';
const http = axios.create({
  baseURL: '<http://localhost:5000/api/v1>',
  timeout: 1000,
});

function getCategories(): Promise<IGetCategoryResponse> {
  return http.get('/cms/categories').then((res) => res.data);
}

export default () =>
  S.list()
    .title('Content')
    .items([
      S.listItem()
        .title('Gestione pagina dei risultati')
        .child(
          S.list()
            .title('Risultati per:')
            .items([
              S.listItem()
                .title('Categoria')
                .child(async () => {
                  const { data: categories } = await getCategories();
                  return categories?.map((element) =>
                    S.document()
                      .schemaType('categoriesSettings')
                      .title(carTypes[element])
                      .documentId(`category-${element}`)
                  );
                }),
            ])
        ),
      // Add a visual divider (optional)d
      S.divider(),
      // List out the rest of the document types, but filter out the config type
      ...S.documentTypeListItems().filter(
        (listItem) => !['categoriesSettings'].includes(listItem.getId())
      ),
    ]);
you can replace the categories with an array of strings
thanks for the help!
I will try in a couple of minutes, and I will let you know
This solution will render the document as listItem but I’m not able to edit the document.
morehover I’ve installed a plugin to order documents and I cant’ see that documents cause they are list item not a real documents
That's correct - you are pulling in these categories from outside the studio, so they are not actual documents until you create them. The above only sets them up in the desk structure so you can more easily create them with specific document IDs.
Regarding not being able to edit the documents, could you share your schema definitions for the 
categoriesSettings
document type? Have you defined 
__experimental_actions
by any chance?
That's correct - you are pulling in these categories from outside the studio, so they are not actual documents until you create them. The above only sets them up in the desk structure so you can more easily create them with specific document IDs.
Regarding not being able to edit the documents, could you share your schema definitions for the 
categoriesSettings
document type? Have you defined 
__experimental_actions
by any chance?
yep
__experimental_actions: [/*‘create’,*/ ‘update’, /*‘delete’,*/ ‘publish’],
is this the problem?
That's correct - you are pulling in these categories from outside the studio, so they are not actual documents until you create them. The above only sets them up in the desk structure so you can more easily create them with specific document IDs.
Regarding not being able to edit the documents, could you share your schema definitions for the 
categoriesSettings
document type? Have you defined 
__experimental_actions
by any chance?
Indeed, by commenting out "create" you are preventing the creation of these documents. What you could try if you do not want to allow additional 
categoriesSettings
documents in the future, is temporarily uncommenting, then creating the docs by adding content to them, and commenting out 
create
once more.
and If i will add more “categories” in the future on my api?
I have to remove the comment everytime?
why I can’t create directly the document instead of list item?
I read something about in the docs that was possibile
Then the same will apply, so you may want to consider taking a different route: either always allowing the creation of these documents or instead creating the documents using the HTTP API instead, which will ignore 
__experimental_actions
(it's just a studio concept).
For more information on creating docs using the HTTP API, see also: https://www.sanity.io/docs/http-mutations#c732f27330a4 
By putting a string in this method, it will create a document with that ID if it doesn't already exist.
That's right: in the code above you are using this approach (
S.document
is in the 
S.listItem
child) - when you start adding content to the empty documents, it will create a document with the provided ID. However, the creation process does rely on the 
create
action being allowed for the document type.
That's right: in the code above you are using this approach (
S.document
is in the 
S.listItem
child) - when you start adding content to the empty documents, it will create a document with the provided ID. However, the creation process does rely on the 
create
action being allowed for the document type.
so the right approach is to create that documents
from the api
not in the studio
so if I have to render all the documents for that specific schemaType what I have to do?
If you want to disable document creation for a type in the studio and still create documents for it without temporarily adding 
create
as an allowed action, then using the HTTP API is indeed a good alternative.
To render all documents available for a specific schema type, you can use a 
documentList
instead. For example:
// deskStructure.js
...
S.listItem()
  .title('Categories')
  .child(
    S.documentList()
      .title('Categories')
      .filter('_type == "categoriesSettings"')
  ),
ok yes it work
ok yes it work
I have to facing the api now
Sorry about the confusion. There's plenty of stuff to get your head around at the beginning, but there are many advantages to being familiar with the HTTP API if you want to build advanced functionality later 🙂 Do let us know if you have any other questions.
Yeah i know,
I’m going to dig in to api docs
the token
the token
is going to expire?
I have to get it once?
If you use your user auth token (
sanity debug --secrets
), it will indeed expire. However, you can set up robot tokens by opening your project on manage.sanity.io and going to Settings &gt; API &gt; Tokens &gt; Add new token. These will not expire 🤖
ooooook
sorry one last question
<dataset-name>
is?
The name of your dataset (
production
by default). You can find all datasets on your project by going to your project on manage.sanity.io and opening the Datasets tab - or by using the 
sanity dataset list
command in your CLI (make sure to run it from your studio's root folder).
The name of your dataset (
production
by default). You can find all datasets on your project by going to manage.sanity.io &gt; Settings &gt; Datasets or using the 
sanity dataset list
command in your CLI (make sure to run it from your studio's root folder).
okok

export async function postNewCategories(categories: string[]): Promise<void> {
  try {
    await <http://http.post|http.post>('/data/mutate/production', {
      mutations: categories.map((category: string) => ({
        create: {
          _id: category,
          _type: 'categoriesSettings',
          title: 'category',
        },
      })),
    });
  } catch (err) {
    console.log(err);
    throw new Error(err.message);
  }
}
so this should work
where http is an instance of axios with token and base url
I will le you know 😄
Yep, that looks alright to me as long as you can guarantee 
category
is unique enough for future usage as these document IDs have to be unique 🙂
yep those are unique cause I’ve already do a normalization my backend side
yep those are unique cause I’ve already do a normalization my backend side
it wokrs!!! ❤️
if it already exsist what happen?
Awesome! The operation will fail if a document with the provided ID already exists. If you prefer that it doesn't fail but skips existing ones, you can use 
createIfNotExists
instead of 
create
. If you wish to replace docs if they already exist, you can use 
createOrReplace
(not recommended here).
ok ok maybe createIfNotExists is perfect
S.documentList()
      .title('Categories')
      .filter('_type == "categoriesSettings"')
In you experience is possibile to add a sort on this by specific field inside the document?
i mean, I’m using a plugin for ordering, and I would like to refect the ordering in the menu
when I use create from api I have to referecing the name of the schema right?
eg:
name: ‘resultBrandsSettings’, type: ‘document’,
title: ‘Brands’,
resultBrandsSettings
That's correct: the 
_type
(mind the underscore) should be set to the schema type (
resultBrandsSettings
in this case)
That's correct: the 
_type
(mind the underscore) should be set to the schema type (
resultBrandsSettings
in this case)
it’s weird cause I’ve set it up all correct
the api works but results arent’ shown
what can I do to debug?
i’m trying in vision mode to quering
*[_type=="resultBrandsSettings"]
Are you able to query the documents? e.g. 
sanity documents query '*[_type == "resultBrandsSettings"]'
Using Vision is fine too here
the array is empty
the function works, and the array with results is passed to the function
export async function postNewBrands(brands: IBrand[]): Promise<void> {
  try {
    await <http://http.post|http.post>('/data/mutate/production', {
      mutations: brands.map((brand: IBrand) => ({
        createIfNotExists: {
          _id: brand.id,
          _type: 'resultBrandsSettings',
          title: brand.name,
        },
      })),
    });
  } catch (err) {
    throw new Error(
      `Sanity API Error: status:${err?.response?.status}, statusCode: ${err?.response?.statusText}`
    );
  }
}
uhm
same for categories
Looks like only those docs are in your dataset right now: https://e83iap8s.api.sanity.io/v1/data/query/production?query=*
yeah
why?
on the Backend side i’ve changed just the name of the schema
nothing else
the weird part is if i change the method to create
i got conflicts
categories [
  'cabrio-coupe',
  'city-car',
  'minivan',
  'other',
  'sedan',
  'suv',
  'van',
  'wagon'
]
Error: Sanity API Error: status:409, statusCode: Conflict
Have you double-checked your Axios instance uses the correct base URL (project ID and dataset name)?
That's correct though: those documents exist - just not under the document type. I'm suspecting it's an ID conflict as they share the same ID this way.
yes all correct in axios
oh ok
make sense
So i have to delete all before
Either that or adapt the IDs
let me delete
yep
fixed
yep
thanks buddy

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.

Get started for freeExplore the demo

Was this answer helpful?