Comments (13)
I too am getting this error. It seems that changing the Author ID causes the error. I wondered if it has something to do with blogs.tsx line 28
// TODO export posts in a proper component
The starter content worked as expected and I could see the blog posts. <update - don't do this> Then I created a new folder under blogs to hold the new post (index.md and the image). When I went to change author ID from 'fabien BENARD' to a new name in both the author.json and index.md the error occurs. Any thoughts? My gatsby knowledge is all of 4 tutorials. Appreciate any pointers you may have on how to fix this.
UPDATE: OK - face/palm
I see now that "npm run generate" will use plop to create a blog post (or page). So, success after updating the author.json to add a new author and image THEN after "npm run generate" adding the blog post's image to the newly created blog/ as you suggested. Worked like a charm. Hopefully someone finds this useful and you didn't put any time into looking into it.
from gatsby-starter.
@i001962 @mghazwi Just to be sure, is it resolved for you?
If yes, you can maybe add some useful tips in the README.md (I accept PR 😃 ) It's not always easy to explained how everything works, so some externals feedbacks is always a good point for me 👍
from gatsby-starter.
Interesting! But definitively lodash.get
^^ Proxy can be nice, but a little bit overkill for this usecase on my own opinion.
var object = { 'a': [{ 'b': { 'c': 3 } }] };
_.get(object, 'a[0].b.c');
// => 3
_.get(object, ['a', '0', 'b', 'c']);
// => 3
_.get(object, 'a.b.c', 'default');
// => 'default'
https://lodash.com/docs/4.17.5#get
So in our case:
const cover = get(frontmatter, "image.children.0.responsiveResolution", {})
from gatsby-starter.
@fabien0102 just submitted PR #61 for the README.md. It will be my first contribution (ever) if you find it acceptable. Noob learning.
from gatsby-starter.
@i001962 Welcome to beautiful world of the open source 😁
from gatsby-starter.
i tried it again and got different error:
TypeError: Cannot read property 'tags' of undefined
./src/pages/blog.tsx.exports.default.props
src/pages/blog.tsx:23
20 | }
21 |
22 | export default (props: BlogProps) => {
> 23 | const tags = props.data.tags.group;
24 | const posts = props.data.posts.edges;
25 | const { pathname } = props.location;
26 | const pageCount = Math.ceil(props.data.posts.totalCount / 10);
from gatsby-starter.
This code requires an image and tag for blog posts. If they are not specified in the frontmatter then errors are thrown. You should specify both and make sure the image in located local to the post.
from gatsby-starter.
It's because an image is missing. In my fork, I added a simple check for its existence. https://github.com/sielay/sielay.com/blob/sielay.com/src/pages/blog.tsx#L26
from gatsby-starter.
@sielay Not a bad idea! I will add this also in this starter ;)
Edit: Not really fit with this starter ^^ Every card need the cover also, I will keep this as it is for now ;)
return (
<Card key={slug}
fluid
image={{
src: cover.responsiveResolution.src,
srcSet: cover.responsiveResolution.srcSet,
}}
header={frontmatter.title}
extra={extra}
description={description}
/>
);
from gatsby-starter.
@sielay BTW, you can totally remove your check, cover
is unused in your project 😄
from gatsby-starter.
Sometimes I use sometimes no :P You know what would be awesome?
I saw recently repo that uses Proxies that returns itself helping to avoid issues with null/undefined in the chain. Can't dig it out, but would be awesome to use such approach without checks each time.
from gatsby-starter.
We can also simply use lodash.get
for this kind of issues, but I don't know what you means by "Proxies", any links/example to help me?
from gatsby-starter.
I meant those https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy. I will try to dig out the specific project. It works like magic method in PHP. Basically, you have an object which can carry null/undefined, but if you ask for children that don't exist it safely gives you undefined instead of crashing.
from gatsby-starter.
Related Issues (20)
- Cannot read tags group. HOT 4
- Create branch for Gatsby v2 HOT 12
- There are conflicting field types in your data. GraphQL schema will omit those fields. HOT 1
- Tags-Page.tsx template and blog.tsx page - corner case HOT 1
- Next branch error eslint-config-react-app missing HOT 3
- error GraphQL Error Unknown field `responsiveResolution` on type `ImageSharp` HOT 2
- how to remove disqus comment section with facebook comments
- what goes in siteMetaData googleVerification HOT 2
- Move `next` to `master`, move current `master` to `v1` HOT 2
- Repo description still says V1 instead of V2 HOT 1
- gatsby-browser and gatsby-ssr need to be Javascript HOT 1
- Allot of vulnerabilities in this repo HOT 2
- Styles from styled components not loading in production, SSR issue?
- Not work with node v11.11.0 && npm v6.7.0 && gatsby v2.4.10 HOT 1
- npm ERR! notarget No matching version found for gatsby@next HOT 3
- License? HOT 1
- Create a new site fails HOT 2
- [Suggestion] replace storybook-readme with Docs Addon HOT 1
- [Idea][Feature Request] Netlify CMS?
- Creating or overriding semantic-ui themes HOT 3
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from gatsby-starter.