Gatsby 页面查询返回未定义

Posted 2023-03-08

【中文标题】Gatsby 页面查询返回未定义

【英文标题】：Gatsby page query returns undefined

【发布时间】：2021-08-04 03:26:24

【问题描述】：

我有一个 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 对象？

【参考方案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

【讨论】：

谢谢，1) 我认为这与我在子目录中的页面有关。如果我在默认的 gatsby 页面上尝试您的示例，例如 pages/my-page.tsx 它确实会返回数据。如何从子目录中的页面查询？ 2) 它工作正常，但我仍然收到Property 'data' does not exist on type 'MyTestQueryQuery'.？我的 IDE 也没有提供任何自动完成功能，为什么我不能像 const SecondPage = ( allGraphCmsProject : MyTestQueryQuery) => 那样解构？

1) 页面查询仅适用于页面本身（/pages 中的***组件）。在“子目录”中，您可能需要使用staticQuery（或useStaticQuery）挂钩或查询页面组件中的数据并将其发送到子组件。 2）说，如果您将数据从父组件（有查询的数据）发送给子组件，例如<SecondComponent allGraphCmsProject= allGraphCmsProject>，您的解构将起作用