将 Gatsby 与 Postgres 连接起来

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 现在支持任意 GraphQL 端点作为源，这将有助于：https://www.gatsbyjs.org/packages/gatsby-source-graphql/

您也可以使用Hasura to give you an instant GraphQL API on Postgres and then query that from your Gatsby app. You can follow the tutorial here。

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

步骤 2： 安装 gatsby 的 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
      }
    }
  }

其他链接：

Sample-app/tutorial: 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 工作。

Answer 3

gatsby-source-pg 模块直接连接到您的数据库并将 tables/views/functions/etc 添加到 Gatsby 的 GraphQL API。要使用它，请安装模块：

yarn add gatsby-source-pg

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

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

如果需要连接远程数据库，连接字符串还可以包括username/password、主机、端口和SSL；例如：postgres://pg_user:pg_pass@pg_host:5432/pg_db?ssl=1

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

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

将 Gatsby 与 Postgres 连接起来

Connect Gatsby with Postgres

postgresql

graphql

gatsby