前提・実現したいこと
Gatsby.js Typescript ContentfulでContentfulで投稿したデータを
Gatsby.jsで問題なく表示できているのですが、ESlint側「オブジェクトは 'null' である可能性があります。ts(2531)」の警告が出ていて気になります。
警告をなくすにはどのようにしたらよろしいでしょうか
発生している問題・エラーメッセージ
オブジェクトは 'null' である可能性があります。ts(2531)
該当のソースコード
import * as React from 'react'; import { Link, graphql } from 'gatsby'; import Layout from '../components/layout'; import SEO from '../components/seo'; import { PostQuery } from '../../types/graphql-types'; // eslint-disable-line import/no-unresolved type Props = { data: PostQuery; }; const BlogPosts: React.FC<Props> = ({ data }: Props) => { const documents = data.allContentfulPost.edges .filter(edge => edge.node.title) .map(edge => { const { id, title, image } = edge.node; return { id, title, image }; }); return ( <Layout> <SEO title="Blog Posts" /> <h1>Blog Posts (source: Contentful)</h1> {documents.map(node => { return ( <div key={node.id}> <h2 key={`${node.id}-title`}>{node.title}</h2> <img src={`${node.image.fixed.src}`} /> // ここで警告が出る </div> ); })} <Link to="/">Go back to the homepage</Link> </Layout> ); }; export const query = graphql` query Post { allContentfulPost(limit: 10) { edges { node { id title image { fixed(width: 1600) { width height src srcSet } } rating } } } } `; export default BlogPosts;
export type PostQuery = { allContentfulPost: { edges: Array<{ node: ( Pick<ContentfulPost, 'id' | 'shopName' | 'rating'> & { image: Maybe<{ fixed: Maybe<Pick<ContentfulFixed, 'width' | 'height' | 'src' | 'srcSet'>> }> } ) }> } };
補足情報(FW/ツールのバージョンなど)
"@types/react": "^16.9.16"
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。