Package Exports
- @sanity-typed/groq-js
- @sanity-typed/groq-js/dist/index.js
This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@sanity-typed/groq-js) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
Readme
@sanity-typed/groq-js
Typed GROQ-JS Results, all inferred, no query changes!
Page Contents
Install
npm install groq-js @sanity-typed/groq-js
Usage
Use parse
and evaluate
exactly as you would from groq-js
. Then, use the results with the typescript types!
your-typed-groq-js.ts
:
// import { evaluate, parse } from "groq-js";
import { evaluate, parse } from "@sanity-typed/groq-js";
const input = '*[_type == "product"]{productName}';
const tree = parse(input);
/**
* typeof tree === {
* type: "Projection";
* base: {
* type: "Filter";
* base: {
* type: "Everything";
* };
* expr: {
* type: "OpCall";
* op: "==";
* left: {
* name: "_type";
* type: "AccessAttribute";
* };
* right: {
* type: "Value";
* value: "product";
* };
* };
* };
* expr: {
* type: "Object";
* attributes: [{
* type: "ObjectAttributeValue";
* name: "productName";
* value: {
* type: "AccessAttribute";
* name: "productName";
* };
* }];
* };
* }
*/
const value = await evaluate(tree, {
dataset: [
{
_type: "product",
productName: "Some Cool Product",
// ...
},
{
_type: "someOtherType",
otherField: "foo",
// ...
},
],
});
const result = await value.get();
/**
* typeof result === {
* productName: "Some Cool Product";
* }[]
*/
You can also use your typed schema and creative use of the satisfies
operator to keep parity with your schema!
npm install sanity groq-js @sanity-typed/types @sanity-typed/groq-js
product.ts
:
// import { defineArrayMember, defineField, defineType } from "sanity";
import {
defineArrayMember,
defineField,
defineType,
} from "@sanity-typed/types";
/** No changes using defineType, defineField, and defineArrayMember */
export const product = defineType({
name: "product",
type: "document",
title: "Product",
fields: [
defineField({
name: "productName",
type: "string",
title: "Product name",
}),
defineField({
name: "tags",
type: "array",
title: "Tags for item",
of: [
defineArrayMember({
type: "object",
name: "tag",
fields: [
{ type: "string", name: "label" },
{ type: "string", name: "value" },
],
}),
],
}),
],
});
sanity.config.ts
:
// import { defineConfig } from "sanity";
import { defineConfig } from "@sanity-typed/types";
import type { InferSchemaValues } from "@sanity-typed/types";
import { product } from "./schemas/product";
/** No changes using defineConfig */
const config = defineConfig({
projectId: "your-project-id",
dataset: "your-dataset-name",
schema: {
types: [
product,
// ...
],
},
});
export default config;
/** Typescript type of all types! */
export type SanityValues = InferSchemaValues<typeof config>;
/**
* SanityValues === {
* product: {
* _createdAt: string;
* _id: string;
* _rev: string;
* _type: "product";
* _updatedAt: string;
* productName?: string;
* tags?: {
* _key: string;
* label?: string;
* value?: string;
* }[];
* };
* // ... all your types!
* }
*/
your-provided-types-groq-js.ts
:
// import { evaluate, parse } from "groq-js";
import { evaluate, parse } from "@sanity-typed/groq-js";
import type { SanityDocument } from "@sanity-typed/types";
import type { SanityValues } from "./sanity.schema";
const input = '*[_type == "product"]{productName}';
const tree = parse(input);
const value = await evaluate(tree, {
dataset: [
{
_type: "product",
productName: "Some Cool Product",
// ...
},
{
_type: "someOtherType",
otherField: "foo",
// ...
},
// The satisfies will throw an error if any inconsistent types are provided
] satisfies Extract<
SanityValues[keyof SanityValues],
Omit<SanityDocument, "_type">
>[],
});
const result = await value.get();
/**
* typeof result === {
* productName: "Some Cool Product";
* }[]
*/