将 Gatsby 与 Postgres 连接起来答案

【问题标题】：Connect Gatsby with Postgres将 Gatsby 与 Postgres 连接起来
【发布时间】：2018-07-21 08:35:58
【问题描述】：

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

【问题讨论】：

标签： postgresql graphql gatsby

【解决方案1】：

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

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

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

【讨论】：

【解决方案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
        }
      }
    }
  }
}

【讨论】：

【解决方案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 安装 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 工作。

【讨论】：