✨Discover storytelling in the AI age with Pixar's Matthew Luhn at Sanity Connect, May 8th—register now

Using an external JSON file to define options for a list in a Sanity schema file

23 replies
Last updated: Feb 12, 2023
Hello, hope everyone is having a nice day!
I’ve got a schema set up for an array of strings, and I’d like to use a list to create checkboxes for entry. Is it possible to import an external JSON file to define the options for the list rather than listing them in my schema file?

bkgd: I’m using 11ty for my front end and have the options defined in a _data file that I want to use for Sanity so the list is in one place only!
Feb 12, 2023, 4:51 PM
Assuming you are using Sanity V3, I do something similar.
The schema files are basically JavaScript. In theory, you could import the json object and then loop over it to create my schema programatically. Just have to make sure you include all of the required fields.
Feb 12, 2023, 5:16 PM
It could get a bit complicated when you start trying to add validation rules or use keys that have callback function.
Feb 12, 2023, 5:17 PM
Yes, that sounds like exactly what I need to do. I don’t need any validation or callbacks so I can keep it simple.
Feb 12, 2023, 5:19 PM
You would also need to be cautious about removing fields.
Feb 12, 2023, 5:19 PM
the “looping over it” is the part where i need help, and how to set up the 11ty data file to export
Feb 12, 2023, 5:19 PM
In the studio, if fields are removed from the schema users will be prompted to remove data that doesn't have a corresponding field in the schema.
Feb 12, 2023, 5:20 PM
I'm not familiar with 11ty, sorry I can't help there.
Feb 12, 2023, 5:20 PM
ok, so my data file looks like
module.exports = [ item, item, …]
but when I try to import in my sanity with
import skills from '../../web/src/_data/skills';
it gives me an error that
"default" is not exported by "../web/src/_data/skills.js", imported by "schemas/project.ts".
Feb 12, 2023, 5:27 PM
That looks like an import / export issue.Maybe try importing as a named export like...


import { skills } from '../../
Feb 12, 2023, 5:30 PM
This could all be impacted by whether you are using JS or TS and what you TS Config looks like. I can point you in the right direction, but you'll have to do a little digging. I'm finding ChatGPT to be really handy with some of these questions BTW 🙂
Feb 12, 2023, 5:31 PM
I’m using TS, what is ChatGPT?
Feb 12, 2023, 5:38 PM
my tsconfig.json file looks like this:
Feb 12, 2023, 5:39 PM
{
  "compilerOptions": {
    "target": "ES2017",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true
  },
  "include": ["**/*.ts", "**/*.tsx"],
  "exclude": ["node_modules"]
}
Feb 12, 2023, 5:39 PM
Feb 12, 2023, 5:46 PM
I ask it questions all the time like... "remind me how to use default exports with module.exports in typescript "
Feb 12, 2023, 5:46 PM
thank you for that tip! in this case I think I need a little more human help! lol
Feb 12, 2023, 5:57 PM
user M
do you have any advice based on my TS Config?
Feb 12, 2023, 7:03 PM
Honestly... I just have to muddle through it. It's not likely that your tsconfig is causing the problem here. But here's mine for comparison...

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "esnext",    
    "outDir": "dist", 
    "jsx": "preserve",
    "lib": ["es6", "dom", "es2015", "es2017"],
    "strict": true, 
    "isolatedModules": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "removeComments": true,
    "preserveConstEnums": true,
    "noImplicitAny": true,
    "noImplicitThis": true,
    "strictNullChecks": true,
  },
  "include": ["**/*.ts", "**/*.tsx"],
  "exclude": ["node_modules", "sanity.cli.ts", "sanity.config.ts"]
}
Feb 12, 2023, 7:12 PM
My module and target are differrent
Feb 12, 2023, 7:12 PM
Why I love ChatGPT Sometimes. Here's a nice exchange....

Hey GPT, do I have to set module to commonjs to use default and named imports and exports?

FROM GPT
No, you do not have to set the module option to commonjs in order to use default and named imports and exports.

ES6 module syntax (import and export) can be used with other module formats as well, such as amd, umd, and system. However, in order to use ES6 module syntax with Node.js, you'll need to transpile the <https://www.sanity.io/typescript-guide/typescript-vs-javascript|typescript> code into a format that's compatible with Node.js, such as CommonJS. This is why setting the module option to commonjs is a common practice when developing Node.js applications with <https://www.sanity.io/typescript-guide/typescript-vs-javascript|typescript>.

In general, you can choose the module format that works best for your specific use case, and configure the module option in <https://www.sanity.io/typescript-guide/typescript-vs-javascript|typescript> accordingly. Just keep in mind that the output JavaScript code needs to be compatible with the module format that you choose.
Feb 12, 2023, 7:16 PM
thank you
user M
I will continue to try to work with ChatGPT, so far its not my best friend, lol
Feb 12, 2023, 8:07 PM
If it was perfect we might not have a job 🙂
Feb 12, 2023, 8:08 PM
So I think I boiled down the problem is that 11ty needs the file to be a CommonJS export, and the Sanity schema file needs ECMAScript import.
Any chance you have advice on how to solve this problem?
Feb 12, 2023, 8:39 PM

Sanity– build remarkable experiences at scale

Sanity is a modern headless CMS that treats content as data to power your digital business. Free to get started, and pay-as-you-go on all plans.

Was this answer helpful?