reactjs - Gatsby-GraphQL - 从 postgres 服务器获取远程数据

Question

我在本地的 postgres 上有一个现有的数据库。

我想在我的 Gatsby 应用程序中通过 GraphQL 获取这些数据。我gatsby-source-pg用来做这个。

从此处的文档+ 示例中不清楚如何正确设置它。据我了解，您需要以下两个突出显示的部分。

// ./src/components/test.js

import { graphql } from 'gatsby';
    
export const query = graphql` // (1) graphQL query
  {
    postgres {
      allUsers {
        nodes {
          id
          firstLastName
        }
      }
    }
  }
`;

const Test = ({data}) => { // (2) grab the `data` prop (not sure where this comes from)  
  return (
    <AppLayout>
      {data.postgres.allUsers.nodes.map(user => <p>{user.firstLastName}</p>)} // data is undefined
    </AppLayout>
  )
}

export default Test

// gatsby-config.js
    {
      resolve: "gatsby-source-pg",
      options: {
        connectionString: "postgres://user@localhost:5432/testdb",
        schema: "public",
      },
    },

问题：

• 如何从./src/components目录中查询数据？如果我运行上面的确切代码，data道具会返回。我undefined注意到从./src/pages/index.js. 也许我缺少options参数gatsby-source-pg来告诉它要查看哪些目录？
• query和从上面的代码是如何data连接的？我无法通过查看示例来判断。

标签： reactjspostgresqlgraphqlgatsby