I am building a blog website using Sanity and NextJS.
I've created this object in the sanity schema.
{
name: "content",
title: "Content",
type: "array",
of: [{
type: "block"
},
{
name: "myCode",
title: "Code",
type: "code"
}
]
}
I am fetching the data using import { createClient } from "next-sanity"; and using import PortableText from "react-portable-text";; to render the objects received from sanity.
{
_createdAt: '2022-09-18T13:16:41Z',
_id: '1f6b2ee7-4a2b-40e7-805e-b00208dfe5d0',
_rev: 'XOYlEtECWeMhp8Pp0lwIEq',
_type: 'blog',
_updatedAt: '2022-09-21T09:50:25Z',
content: [
{
_key: 'd9fba48f3f71',
_type: 'myCode',
code: '"""\nThis is the first part of code in python\n"""',
language: 'python'
},
{
_key: '6a037159196b',
_type: 'block',
children: [Array],
markDefs: [],
style: 'normal'
},
{
_key: 'ad404d6059fe',
_type: 'myCode',
code: 'def fun():\n print("PYFUN")',
language: 'python'
},
{
_key: 'f8e723dbff93',
_type: 'block',
children: [Array],
markDefs: [],
style: 'h1'
}
]
}
Now, I want to render the blog.content section using PortableText.
Every object is rendering, except the object inside the blog.content with _type="myCode".
Is there a specific way to render the _type="myCode"? any help is really appriciated.
Related
I have an object in board variable
Initial Data:
const [board, setBoard] = useState({
lanes: [],
});
{
lanes: [{
title: 'Bugs',
id: 'd83706b0-b252-11ec-8845-ad6b1e4ecd03',
cards: [{
id: null,
title: 'Bug #1',
description: 'Can AI make memes',
}, ],
},
{
title: 'Tests',
id: 'd83706b0-b252-11ec-8845-ad6b1e4ecd04',
cards: [{
id: null,
title: 'Test #1',
description: 'Can AI make memes',
}, ],
},
],
};
I want to add a new element to the cards array but only to the first element in the lanes array. Other answers seem to point to having to use a callback pattern, but I am quite unfamiliar with this.
Thanks for any help.
As for any modification you want to do on a useState variable, you must use an arrow function inside of the "set" function.
You can do something like that :
setBoard((currentBoard)=> {
currentBoard.lanes[0].cards = [...currentBoard.lanes[0].cards, whateverCardYouWantToAdd ]
return {... currentBoard} //necessary to create a new object because else the hook won't be updated
})
Maybe with this.
const addValue = () => {
let t = [...board];
t[0].lanes.cards.push({
id: null,
title: "Bug #1",
description: "Can AI make memes"
});
};
I have a recipes.js document that has a tag field:
{
name: 'tags',
title: 'Tags',
type: 'array',
of: [{ type: 'reference', to: { type: 'tags' } }],
options: {
layout: 'tags',
},
},
it references another document called tags.js:
export default {
name: 'tags',
type: 'document',
title: 'Tags',
fields: [
{
name: 'title',
title: 'Title',
type: 'string',
},
],
};
I am trying to add the tags to each recipe as an array of strings in graphql. such as:
"tags": ['dinner', 'lunch', 'ribs']
but instead, I get an array of objects:
"tags": [
{
"title": "breakfast"
},
{
"title": "pancakes"
},
{
"title": "food"
}
]
How can I tell sanity all I want is each one to be added in as a string so it is an array of strings and not objects.
Sanity's GraphQL API does not support transforming the data structure into something else. If you want to do that, you will have to use GROQ.
I'm developing a multilanguage site and in several sections I use a hardcoded json to store some clients details (name, logo, project description and website) and then I map the json file and print the details using a component nothing fancy.
The problem is that I'm trying to set multilanguage and I don't know why when I try to set translated values to the json is not working. This is how I'm trying it now:
This is my react component:
import { useTranslation } from "react-i18next";
const { t } = useTranslation();
const companyADescription = t("projects.companyA.name");
{
name: "Company A",
url: "company.com",
image: "/assets/projects/a.png",
technologies: [
{
icon: "/assets/tech/react.png",
link: "#",
alt: "",
},
{
icon: "/assets/tech/firebase.png",
link: "#",
alt: "",
},
],
description: t("project.companyA.name"),
},
{
name: "Company B",
url: "company.com",
image: "/assets/projects/b.png",
technologies: [
{
icon: "/assets/tech/react.png",
link: "#",
alt: "",
},
{
icon: "/assets/tech/firebase.png",
link: "#",
alt: "",
},
],
description: t("projects.companyB.name"),
},
And this is my json file with the translation:
"projects": {
"companyA": {
"name": "Company A Project",
"description": "This is the company project description A"
}
}
On other sections I use the t function from the useTranslation hook and works well I already spent a lot of time on this issue :(
The problem is here
description: t("project.companyA.name")
The function isnt being called
You can try this above declaration of JSON
const descriptionA = t("project.companyA.name")
const descriptionB = t("projects.companyB.name")
And then assign the values in JSON as
{
name: "Company A",
url: "company.com",
image: "/assets/projects/a.png",
technologies: [
{
icon: "/assets/tech/react.png",
link: "#",
alt: "",
},
{
icon: "/assets/tech/firebase.png",
link: "#",
alt: "",
},
],
description: descriptionA ,
},
{
name: "Company B",
url: "company.com",
image: "/assets/projects/b.png",
technologies: [
{
icon: "/assets/tech/react.png",
link: "#",
alt: "",
},
{
icon: "/assets/tech/firebase.png",
link: "#",
alt: "",
},
],
description: descriptionB ,
},
I have the following data coming from an API:
const feed = {
id: "feedId",
content: "...",
comments: [
{
id: "commentId",
content: "...",
// reply comments
comments: [{
id: "commentId",
content: "..."
}]
}
],
}
I want to normalize the data for use in Redux as presented here. But my data has reply comments nested. I dont know where to place comment reply. Should I use normalize data and normalizr lib ?. Thank a lot If you answer and explain for me. Sorry about my bad english, but I really want know.
// where place comments reply ???
{
feeds: {
byId: {
"feed1": {
id: "feed1",
content: "...",
comments: ["comment1", "comment2"],
},
"feed2": {
id: "feed2",
content: "...",
comments: ["comment3", "comment4"],
},
},
allIds: ["feed1", "feed2"],
},
comments: {
byId: {
"comment1": {
id: "comment1",
content: "...",
},
"comment2": {
id: "comment2",
content: "...",
},
"comment3": {
id: "comment3",
content: "...",
},
"comment4": {
id: "comment4",
content: "...",
},
},
allIds: ["comment1", "comment2", "comment3", "comment4"],
},
};
This is my current init feedReducer for handle feed and comments in reducer.
const initialState = {
feed_id_1: {
id: "feed_id_1",
content: "...",
comments: [
{
id: "comment_id_1",
content: "...",
comments: [
{ id: "comment_reply_id_1", content: "..." },
{ id: "comment_reply_id_2", content: "..." },
],
},
{},
],
},
// ...
};
I'm using fullcalendar in react and all works fine until I start using the resourceRender prop and the child resources are displaying not as a part of the resource parent expansion anymore.
How show the child of a resource as to how the default designs?
This is how my resources looks like
export const resources = [
{
id: 1,
title: "Conversación estaciones",
},
{
id: 2,
title: "Renovaciones Las Americas",
},
{
id: 3,
title: "Remuneración II",
children: [
{ id: "d1", show: true, title: "Room D1" },
{ id: "d2", show: false, title: "Room D2" }
],
},
{
id: 4,
title: "Actividades cotidianas",
},
{
id: 5,
title: "Actividades rudimentarias ",
}
];
And this is how the children resources render in the calendar
this is how the children resources render in the calendar