Question

我想使用graphql将数据从Postgres提取到Gatsby。我写了node.js服务器，但我找不到在gatsby中使用它的方法。（https://github.com/gstuczynski/graphql-postgres-test）你有什么想法吗？

Answer 1

您需要做的是实现一个源插件，如https://www.gatsbyjs.org/docs/create-source-plugin/所示。

gatsby存储库中有许多实现源API的示例。看看那些灵感！基本上你需要将你的Postgres数据库的内容翻译成gatsby理解的格式。盖茨比称这种格式为“节点”。

您可以实现一个插件，它可以直接与您的数据库接口，也可以与您的节点服务器公开的任何API接口（graphql，REST等）。

Answer 2

gatsby-source-pg模块直接连接到您的数据库，并将表/视图/函数/等添加到Gatsby的GraphQL API。要使用它，请安装模块：

yarn add gatsby-source-pg

然后将其添加到gatsby-config.js中的插件列表中：

module.exports = {
  plugins: [
    /* ... */
    {
      resolve: "gatsby-source-pg",
      options: {
        connectionString: "postgres://localhost/my_db",
      },
    },
  ],
};

如果需要连接到远程数据库，则连接字符串还可以包括用户名/密码，主机，端口和SSL。例如：postgres://pg_user:pg_pass@pg_host:5432/pg_db?ssl=1

您可以使用根postgres字段在组件中查询它，例如：

{
  postgres {
    allPosts {
      nodes {
        id
        title
        authorId
        userByAuthorId {
          id
          username
        }
      }
    }
  }
}

Answer 3

Gatsby现在支持任意GraphQL端点作为源，这将有助于：https://www.gatsbyjs.org/packages/gatsby-source-graphql/

您还可以使用Hasura在Postgres上为您提供即时的GraphQL API，然后从您的Gatsby应用程序中查询它。您可以按照教程here进行操作。

第1步：针对您现有的Postgres数据库部署Hasura：https://docs.hasura.io/1.0/graphql/manual/getting-started/using-existing-database.html

步骤2：为盖茨比安装gatsby-source-graphql插件：https://www.gatsbyjs.org/packages/gatsby-source-graphql/

步骤3：配置插件

{
  plugins: [
    {
      resolve: 'gatsby-source-graphql', // <- Configure plugin
      options: {
        typeName: 'HASURA',
        fieldName: 'hasura', // <- fieldName under which schema will be stitched
        createLink: () =>
          createHttpLink({
            uri: `https://my-graphql.herokuapp.com/v1alpha1/graphql`, // <- Configure connection GraphQL url
            headers: {},
            fetch,
          }),
        refetchInterval: 10, // Refresh every 10 seconds for new data
      },
    },
  ]
}

第4步：在您的组件中进行GraphQL查询

const Index = ({ data }) => (
  <div>
    <h1>My Authors </h1>
    <AuthorList authors={data.hasura.author} />
  </div>
)
export const query = graphql`
  query AuthorQuery {
    hasura {        # <- fieldName as configured in the gatsby-config
      author {      # Normal GraphQL query
        id
        name
      }
    }
  }

其他链接：

示例应用/教程： https://github.com/hasura/graphql-engine/tree/master/community/sample-apps/gatsby-postgres-graphql
博客： https://blog.hasura.io/create-gatsby-sites-using-graphql-on-postgres-603b5dd1e516

注意：我在Hasura工作。

将Gatsby与Postgres联系起来

3 个答案: