Sanity

Introduced in the 2023-2024 academic year to IrvineHacks development, Sanity is a content management system that has made the process of uploading and maintaining the content on our websites much easier. Sanity provides a TypeScript client that we use to pull from our content database and render that onto our webpage.

Setup

The following environment variables are required in order to get Sanity to pull data from our content database:

• NEXT_PUBLIC_SANITY_PROJECT_ID
• NEXT_PUBLIC_SANITY_DATASET
• NEXT_PUBLIC_SANITY_API_VERSION

Schemas

Schemas describe the different types of content we plan on showing in our application. For example, the FAQ section on the home page relies on an FAQ schema. Specifically, when adding a new FAQ, a user that has write access to our Sanity content would go to http://localhost:3333 in the development environment (or https://content.irvinehacks.com/ in production), click on FAQs, click the first item in the list that appears, and then add an item.

GROQ Queries

To query the content from the database from our frontend, we use the TypeScript client mentioned at the top of the page. We create a client, specifying all the necessary environment variables and pass in GROQ queries to fetch content. The query to fetch all FAQs would be:

await client.fetch("*[_type == 'faqs']")

For more GROQ documentation, see their official docs.

Zod

To validate the types and schemas in the data that is queried from Sanity, we use Zod, a TypeScript schema validation library. We can declare our own Zod schema and use it to parse the data returned from Sanity. See getQuestions.ts in the FAQ/ directory for an example on how to do this.