Creating a React Blog Website with Gatsby.js & Sanity.io
Featured Blogs
If you’re looking to build a blog website using React, Gatsby.js and Sanity.io, you’re in luck! These powerful tools make it easy to create a fast, modern, and easy-to-manage blog website with a rich user experience. To get you started, we’ve rounded up some of the best blogs created using this technology stack.
1. The Tech Blog
This tech blog showcases the latest in technology news, tips, and tutorials. With a clean and modern design, it’s easy to navigate and offers a seamless reading experience.
2. The Travel Blog
Explore the world through this stunning travel blog. With beautiful imagery and engaging content, you’ll feel inspired to pack your bags and go on an adventure.
3. The Food Blog
For foodies, this blog is a must-visit. Featuring mouthwatering recipes and restaurant reviews, it’s a feast for the eyes and the taste buds.
4. The Lifestyle Blog
This lifestyle blog covers a wide range of topics, from fashion and beauty to wellness and home decor. It’s a one-stop-shop for all things lifestyle-related.
5. The DIY Blog
If you’re a fan of DIY projects, you’ll love this blog. From home improvement to crafting, it’s full of creative and inspiring ideas.
Ready to create your own blog website with Gatsby.js and Sanity.io? Check out their documentation and tutorials to get started!
Not found a data from this query .. please tell me what the issue
{
"data": {
"allSanityFeatured": {
"nodes": [
{
"blogs": [
{
"title": null
},
{
"title": null
},
{
"title": null
}
]
}
]
}
},
"extensions": {}
}
{
"data": {
"allSanityFeatured": {
"nodes": [
{
"blogs": [
{
"title": null,
"publishedAt": null
},
{
"title": null,
"publishedAt": null
},
{
"title": null,
"publishedAt": null
}
]
}
]
}
},
"extensions": {}
}
Any idea why is giving me null values?
Can anyone help me unblock
This is the error i'm getting
Cannot read properties of undefined (reading 'current')
./src/components/blogs/BlogGrid.js:12
Open in Editor
10 | <BlogItem
11 | title={blog.title}
> 12 | path={blog.slug.current}
| ^
13 | categories={blog.categories}
14 | image={{
15 | ImageData: blog.coverImage.
========================================
This is what my BlogGrid file looks like
================
import React from 'react';
import { BlogGridStyles } from '../../styles/blog/BlogGridStyles';
import BlogItem from './BlogItem';
function BlogGrid({ blogs }) {
return (
<BlogGridStyles>
{blogs &&
blogs.map((blog) => (
<BlogItem
title={blog.title}
path={blog.slug.current}
categories={blog.categories}
image={{
ImageData: blog.coverImage.asset.gatsbyImageData,
altText: blog.coverImage.alt,
}}
publishedAt={blog.publishedAt}
/>
))}
</BlogGridStyles>
);
}
export default BlogGrid;
I got another problem.
{
"errors": [
{
"message": "Cannot query field "slug" on type "SanityBlog".",
"locations": [
{
"line": 20,
"column": 13
}
],
please I've got a challenge; When i test my query in graphql playground, it doesn't return the blog post
It seems impossible to get a heart from web cifar
🙁
Btw big fan
🤩😍🥰🖤💝💙💚❤️💞🧡💓💖💗💕❣️💟💛💜