Gatsby 页面查询返回未定义

Question

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

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

工作.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 返回 undefined？

还有如何只返回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