Gatsby 页面查询 returns 未定义

Question

我有一个 Gatsby 页面组件并尝试从 GraphCMS 查询一些数据。我在文件夹中添加了页面组件：

/work
/work/index.ts
/work/Work.tsx

Work.tsx:

import React from 'react';

import { Link, graphql } from 'gatsby';

import SEO from 'components/seo';
import { InspirationQueryQuery } from 'graphqlTypes';
import Layout from 'shared/Layout';

const Work = ({ allGraphCmsProject }: InspirationQueryQuery) => {
  console.log(allGraphCmsProject);
  return (
    <Layout>
      <SEO title="Work" />
      <h1>Hi from the work page</h1>
      <p>Welcome to page 2</p>
      <Link to="/">Go back to the homepage</Link>
    </Layout>
  );
};

export default Work;

export const query = graphql`
  query InspirationQuery {
    allGraphCmsProject {
      nodes {
        id
        name
      }
    }
  }
`;

我还使用 graphql code generator 为我的 graphql 查询生成类型。为什么allGraphCmsProject return未定义？

以及如何 return 只是 data 对象？

Answer 1

你的 allGraphCmsProject 信息是 inside props.data.allGraphCmsProject 所以结果结构应该是：

import React from 'react';

import { Link, graphql } from 'gatsby';

import SEO from 'components/seo';
import { InspirationQueryQuery } from 'graphqlTypes';
import Layout from 'shared/Layout';

const Work = ({ data: {allGraphCmsProject} }: InspirationQueryQuery) => {
  console.log(allGraphCmsProject);
  return (
    <Layout>
      <SEO title="Work" />
      <h1>Hi from the work page</h1>
      <p>Welcome to page 2</p>
      <Link to="/">Go back to the homepage</Link>
    </Layout>
  );
};

export default Work;

export const query = graphql`
  query InspirationQuery {
    allGraphCmsProject {
      nodes {
        id
        name
      }
    }
  }
`;

或者：

import { PageProps } from "gatsby"

const Work = (props: PageProps) => {
  console.log(props.data.allGraphCmsProject);
  ... // rest of the code

Gatsby 页面查询 returns 未定义

Gatsby page query returns undefined

typescript

graphql

gatsby