unexpected token ",", expected expression in sanity studio vision - reactjs

I am following a course on react native and We are using Sanity as our backend. I have already set the schemas and made the adjustments in my Sanity Studio.
HERE IS MY FEATURED SCHEMA CODE:
export default {
name: 'featured',
title: 'featured Menu Categories',
type: 'document',
fields: [
{
name: 'name',
type: 'string',
title: 'Featured category name',
validation: (Role) => Role.required(),
},
{
name: 'short_description',
type: 'string',
title: 'Short description',
validation: (Role) => Role.max(200),
},
{
name: 'restuarants',
type: 'array',
title: 'Restuarants',
of: [{ type: 'reference', to: [{ type: 'restuarant' }] }],
},
],
};
HERE IS MY RESTAURANT SCHEMA CODE:
export default {
name: 'restaurant',
title: 'Restuarant',
type: 'document',
fields: [
{
name: 'name',
type: 'string',
title: 'Restuarant name',
validation: (Role) => Role.required(),
},
{
name: 'short_description',
type: 'string',
title: 'Short description',
validation: (Role) => Role.max(200),
},
{
name: 'image',
type: 'image',
title: 'Image of the Restuarant',
},
{
name: 'lat',
type: 'number',
title: 'latitude of the restaurant',
},
{
name: 'long',
type: 'number',
title: 'longitude of the restaurant,
},
{
name: 'address',
type: 'string',
title: 'Address of the Restuarant',
validation: (Role) => Role.required(),
},
{
name: 'rating',
type: 'number',
title: 'Enter a rating of (1 - 5)',
validation: (Role) =>
Role.required()
.min(1)
.max(5)
.error('please enter a number between 1 - 5'),
},
{
name: 'type',
type: 'string',
title: 'Category',
validation: (Role) => Role.required(),
type: 'reference',
to: [{ type: 'category' }],
},
{
name: 'dishes',
type: 'array',
title: 'Dishes',
of: [{ type: 'reference', to: [{ type: 'dish' }] }],
},
],
};
I also did one for the dish and category.
Then I went to my Sanity Studio to fill in my restaurant schema fields;
After I went to my Vision Board in Sanity Studio and did a query(Just like the instructor):
*[_type == "featured"]{
...,
restuarants[]=> {
...,
dishes[]=> ,
type=> {
name
}
},
}
And I got an error of:
unexpected token ",", expected expression ;
I did what any developer would have done if they got an error. I double-checked my code and compared it to the instructor in the video. (I still got the error). Then I googled it(And found no answer). It's been 2 days now and I still haven't found anything.
This is my first querying in Sanity and I am not sure what I am doing wrong with my query. Can anyone please help me? Thanks.

As the error mentioned, you missed a ' in your schema code.
Keep a ' after restaurant
{
name: 'long',
type: 'number',
title: 'longitude of the restaurant',
},

No worries I found the answer to my problem. The problem was with my querying.
HERE WAS MY CODE BEFORE:
*[_type == "featured"]{
...,
restuarants[]=> {
...,
dishes[]=> ,
type=> {
name
}
},
}
THIS IS HOW I WAS SUPPOSED TO WRITE IT:
*[_type == "featured"]{
...,
restuarants[]-> {
...,
dishes[] -> ,
type-> {
name
}
},
}
I was supposed to use a straight line instead of an equal sign.
I hope this helps anyone who runs into this problem

Related

Getting error of undefined when fetching data from sanity.io in next.js

I'm pretty new to the headless cms of sanity.io. As I'm trying to fetch my data im getting this error but couldn't figure out why or where the problem could be exactly.
Anybody some ideas?
Error: Error serializing .images returned from getServerSideProps in "/company/[slug]".
Reason: undefined cannot be serialized as JSON. Please use null or omit this value.
//the slug file
export const Company = ({ title, slug, logo, images, currency, categories, body, url, location }) => {
console.log(title, slug, logo, images, currency, categories, body, url, location )
return <>Content</>
};
export const getServerSideProps = async pageContext => {
const pageSlug = pageContext.query.slug;
if (!pageSlug) {
return {
notFound: true
}
}
const query = encodeURIComponent(`*[ _type == "company" && slug.current == "${pageSlug}" ]`);
const url = `https://op5ktqwm.api.sanity.io/v1/data/query/production?query=${query}`;
const result = await fetch(url).then(res => res.json());
const post = result.result[0];
if (!post) {
return {
notFound: true
}
} else {
return {
props: {
title: post.title,
slug: post.slug,
logo: post.logo,
images: post.images,
currency: post.currency,
categories: post.categories,
body: post.body,
url: post.url,
location: post.location
}
}
}
}
export default Company;
//backend code structure
export default {
name: 'company',
title: 'Company',
type: 'document',
fields: [
{
name: 'title',
title: 'Title',
type: 'string',
},
{
name: 'slug',
title: 'Slug',
type: 'slug',
options: {
source: 'title',
maxLength: 96,
},
},
{
name: 'logo',
title: 'Logo',
type: 'image',
},
{
name: 'images',
title: 'Images',
type: 'array',
of: [{type: 'companyImage'}]
},
{
name: 'currency',
title: 'Currency',
type: 'array',
of: [
{
type: 'reference',
to: {type: 'currency'},
},
],
},
{
name: 'categories',
title: 'Categories',
type: 'array',
of: [
{
type: 'reference',
to: {type: 'category'},
},
],
},
{
name: 'body',
title: 'Body',
type: 'localeBlockContent',
},
{
name: 'url',
title: 'URL',
type: 'string',
},
{
name: 'location',
title: 'Location',
type: 'geopoint',
},
],
preview: {
select: {
title: 'title',
manufactor: 'manufactor.title',
media: 'defaultProductVariant.images[0]',
},
},
}

Access Array from Property in Nested Object

I have the following nested object:
export const mockData = {
sections: [
{
name: 'Client',
subSections: [
{
name: 'Client Detail'
}
]
},
{
name: 'Sales',
subSections: [
{
name: 'Overview',
subSections: [
{
name: 'Overview - A',
fields: [
{
key: 'firmName',
type: 'input',
templateOptions: {
label: 'Firm Name',
required: true
}
},
{
key: 'requestOption',
type: 'select',
templateOptions: {
label: 'Request Option',
required: true,
options: [
{ value: '1', label: '1' },
{ value: '2', label: '2' },
{ value: '3', label: '3' },
{ value: '4', label: '4' }
]
}
},
{
key: 'region',
type: 'select',
templateOptions: {
label: 'Region',
required: true,
options: [
{ value: '1', label: '1' },
{ value: '2', label: '2' },
{ value: '3', label: '3' },
{ value: '4', label: '4' },
{ value: '5', label: '5' }
]
}
}
]
}
]
}
]
}
]
};
and I would like to access the array from the fields property in order to render a form. Right now what I have is overviewA: FormlyFieldConfig[] = mockData.sections[1].subSections[0].subSections[0].fields, but I am facing the error of
Property 'subSections' does not exist on type '{ name: string; }'.
However, this error goes away when do a work-around and I add the property subSections to the nested object like so:
export const mockData = {
sections: [
{
name: 'Client',
subSections: [
{
name: 'Client Detail',
subSections: []
}
]
},
{
name: 'Sales',
subSections: [
{
name: 'Overview',
subSections: [
{
name: 'Overview - A', ...
I was wondering why
I was facing the issue without the work-around, and
How can I access the array from the property fields without the work-around?

Ant design sort table code not working on the react typescript

I used following ant design sort table code in react type script, its not working correctly anyone know how to do that correctly
My code here
import { Table } from 'antd';
import * as React from 'react';
import { Table } from 'antd';
const columns = [
{
title: 'Name',
dataIndex: 'name',
filters: [
{
text: 'Joe',
value: 'Joe',
},
{
text: 'Jim',
value: 'Jim',
},
{
text: 'Submenu',
value: 'Submenu',
children: [
{
text: 'Green',
value: 'Green',
},
{
text: 'Black',
value: 'Black',
},
],
},
],
// specify the condition of filtering result
// here is that finding the name started with `value`
onFilter: (value:any, record:any) => record.name.indexOf(value) === 0,
sorter: (a:any, b:any) => a.name.length - b.name.length,
sortDirections: ['descend'],
},
{
title: 'Age',
dataIndex: 'age',
defaultSortOrder: 'descend',
sorter: (a:any, b:any) => a.age - b.age,
},
{
title: 'Address',
dataIndex: 'address',
filters: [
{
text: 'London',
value: 'London',
},
{
text: 'New York',
value: 'New York',
},
],
filterMultiple: false,
onFilter: (value:any, record:any) => record.address.indexOf(value) === 0,
sorter: (a:any, b:any) => a.address.length - b.address.length,
sortDirections: ['descend', 'ascend'],
},
];
const data = [
{
key: '1',
name: 'John Brown',
age: 32,
address: 'New York No. 1 Lake Park',
},
{
key: '2',
name: 'Jim Green',
age: 42,
address: 'London No. 1 Lake Park',
},
{
key: '3',
name: 'Joe Black',
age: 32,
address: 'Sidney No. 1 Lake Park',
},
{
key: '4',
name: 'Jim Red',
age: 32,
address: 'London No. 2 Lake Park',
},
];
function onChange(pagination:any, filters:any, sorter:any, extra:any) {
console.log('params', pagination, filters, sorter, extra);
}
//Table sample data
export class Customertable extends React.Component {
render() {
return (
/* Start Search button*/
<div className="customertable-section">
<div>
<Table columns={columns} dataSource={data} onChange={onChange} />
</div>
</div>
/* End of Search button*/
);
}
}
While declaring the variable in typescript, you need to give it like, columns: any = [] and data: any = []..
And while making table , you should give the props like,
<Table columns={this.columns} dataSource={this.data} />
Working sample antd table with typescript here...
To add on to Maniraj's comment, the documentation provides a section for Typescript specific usage:
https://ant.design/components/table/#Using-in-TypeScript
Setting the type of columns is possible by importing ColumnsType from 'antd/es/table'
Here the solution that may help someone. You should write type for your table config using default ant types and then in compare func, your item is DefaultRecordType, func returns number.
const TABLE_COLUMNS: ColumnsType<DefaultRecordType> = [
{
title: 'ISO #',
dataIndex: 'iso',
key: 'iso',
sorter: (a: DefaultRecordType, b: DefaultRecordType): number =>
a.iso.localeCompare(b.iso),
},]
You can simply sort your ant design table's column by replace your old code with new:
Old Code:
sorter: (a:any, b:any) => a.name.length - b.name.length,
New Code:
sorter: (a:any, b:any) => a.name.localeCompare(b.name),

Kendo Grid DateColumn show NaN/NaN/NaN

In every grid (Kendo for AngujarJs) on my project that contains a DateTime value I'm getting this NaN/NaN/NaN
Here is my schema:
schema: {
model: {
id: 'RequestId',
fields: {
RequestId: { type: 'number' },
RequestNumber: { type: 'number'},
FileNumber: { type: 'string' },
RegistrationDate: { type: 'datetime' },
RequestStatus: { type: 'string' },
UnitName: { type: 'string' }
}
}
}
I've tried with RegistrationDate: { type: 'string' }, or RegistrationDate: { type: 'date' }, but nothing change, also I tried this on my columns:
{
field: 'RegistrationDate',
title: 'Fecha de Registro',
type: 'date'
},
Or type: 'datetime' and nothing.
Here is what I get from the server:
Any idea on how to make it work? Its pretty basic to show a Date in a grid, I know, in other projects I have no problem, but as you can see, I tried all I could think of.
Try this:
{
field: 'RegistrationDate',
title: 'Fecha de Registro',
format: "{0:yyyy-MM-dd HH:mm:ss}"
}

Nested property keys not working with custom template

Nested property keys is working fine with default type. But it's not working with the below custom template. Why ?
Here is my fields:
vm.fields = [
{
type: 'editableInput',
key: 'profile.name.firstname',
templateOptions: {
label: 'First Name'
}
},
{
type: 'editableInput',
key: 'profile.name.lastname',
templateOptions: {
label: 'Last Name'
}
}
];
What I expected :
{
"profile": {
"name": {
"firstname": "rajagopal",
"lastname": "subramanian"
}
}
But this is what I get:
{
"profile.name.firstname": "rajagopal",
"profile.name.lastname": "subramanian"
}
My Formly Config:
formlyConfig.setType({
extends: 'input',
template: '<div><span editable-text="model[options.key]" e-name="{{::id}}"}}">{{ model[options.key] || "empty" }}</span></div>',
name: 'editableInput'
});
Here is JSBIN
Thanks in advance.
The issue is with how nested keys work with angular-formly. Basically it only works with elements that have an ng-model. The work around for you is to use the model property, and not nested keys (like this):
{
type: 'editableInput',
model: 'model.profile.name',
key: 'firstname',
templateOptions: {
label: 'First Name',
placeholder: 'Enter your First Name'
}
},
{
type: 'editableInput',
model: 'model.profile.name',
key: 'lastname',
templateOptions: {
label: 'Last Name',
placeholder: 'Enter your First Name'
}
}
Good luck!
profile.name.firstname - > profile[name][firstname]
It's my imagine.I have never used Angular

Resources