Skip to main content
View plugin on GitHub
See starters using this

PostGraphile Graphile Heart Gatsby

gatsby-source-pg

This module helps you pull your PostgreSQL database into Gatsby with minimal effort.

To install:

yarn add gatsby-source-pg

(or npm install --save gatsby-source-pg)

Then add the config to your gatsby-config.js:

module.exports = {
  /* ... */
  plugins: [
    /* ... */

    {
      resolve: "gatsby-source-pg",
      options: {
        connectionString: "postgres:///mydb",
        schema: "public",
        refetchInterval: 60, // Refetch data every 60 seconds
      },
    },
  ],
};

The connectionString can be any valid PostgreSQL connection string, a full connection string might look like: postgres://pg_user:pg_pass@pg_host:pg_port/pg_db?ssl=1

How to query

{
  postgres {
    allPostsList {
      id
      authorId
      userByAuthorId {
        id
        username
      }
      title
    }
  }
}

Example

For a working example of gatsby-source-pg, see gatsby-source-pg-example.

Thanks

This plugin uses gatsby-source-graphql to merge the PostGraphile GraphQL schema into Gatsbyโ€™s.

Customising

This plugin is powered by PostGraphile, which is built on the highly flexible and customisable Graphile Engine.

You can add to options most of the PostGraphile schema-only options

In addition, we accept the typeName and fieldName options from gatsby-source-graphql which affect how the schema is namespaced, and the refetchInterval setting to trigger refetching data every X seconds.

A common thing you might want to do is to shorten the names that PostGraphile uses by default, you can do this using a plugin such as @graphile-contrib/pg-simplify-inflector:

// gatsby-config.js
module.exports = {
  /* ... */
  plugins: [
    /* ... */
    {
      resolve: "gatsby-source-pg",
      options: {
        connectionString: "postgres:///mydb",
        schema: "public",

        /* ๐Ÿ‘‡ */
        appendPlugins: [require("@graphile-contrib/pg-simplify-inflector")],
        /* ๐Ÿ‘† */
      },
    },
  ],
};

Getting help

Pop into the Graphile Discord: http://discord.gg/graphile


Docs
Tutorials
Plugins
Blog
Showcase