https://github.com/graphile/gatsby-source-pg

PostgreSQL source for Gatsby, powered by PostGraphile
https://github.com/graphile/gatsby-source-pg

Last synced: 23 days ago
JSON representation

PostgreSQL source for Gatsby, powered by PostGraphile

• Host: GitHub
• URL: https://github.com/graphile/gatsby-source-pg
• Owner: graphile
• Created: 2018-11-01T12:35:34.000Z (about 6 years ago)
• Default Branch: main
• Last Pushed: 2024-09-20T10:25:58.000Z (about 1 month ago)
• Last Synced: 2024-09-27T18:40:39.094Z (about 1 month ago)
• Language: JavaScript
• Size: 444 KB
• Stars: 36
• Watchers: 4
• Forks: 15
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • Funding: .github/FUNDING.yml

Awesome Lists containing this project

• awesome-list - gatsby-source-pg

README

        


  

    

  

  

  

    

  





  gatsby-source-pg



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

effort.

## Crowd-funded open-source software

To help us develop this software sustainably, we ask all individuals and

businesses that use it to help support its ongoing maintenance and development

via sponsorship.

### [Click here to find out more about sponsors and sponsorship.](https://www.graphile.org/sponsor/)

And please give some love to our featured sponsors 🤩:


The Guild *


Dovetail *


Stellate *


Steelhead *


LatchBio *

\* Sponsors the entire Graphile suite

## Usage

To install:

```

yarn add gatsby-source-pg

```

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

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

```js

module.exports = {

  /* ... */

  plugins: [

    /* ... */

    {

      resolve: "gatsby-source-pg",

      options: {

        connectionString: "postgres://user:pass@host/dbname",

        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

```graphql

{

  postgres {

    allPostsList {

      id

      authorId

      userByAuthorId {

        id

        username

      }

      title

    }

  }

}

```

## Example

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

[gatsby-source-pg-example](https://github.com/graphile/gatsby-source-pg-example).

## Thanks

This plugin uses

[`gatsby-source-graphql`](https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-source-graphql#readme)

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](https://www.graphile.org/postgraphile/usage-schema/#api-createpostgraphileschemapgconfig-schemaname-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`:

```js

// 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](http://discord.gg/graphile)

## Helpful links

- [Gatsby documentation](https://www.gatsbyjs.org/)

- [gatsby-source-pg-example](https://github.com/graphile/gatsby-source-pg-example/)

- [PostGraphile documentation](https://www.graphile.org/postgraphile/)