CODEWITHSUNDEEP
postgresqlgraphqlgatsby
tyskocz
tyskocz

Reputation: 133

Connect Gatsby with Postgres

I would like to pull data from Postgres to Gatsby using graphql. I have written node.js server, but i cannot find way to use it in gatsby. (https://github.com/gstuczynski/graphql-postgres-test) Have you any ideas?

Upvotes: 4

Views: 2489

Answers (3)

iamnat
iamnat

Reputation: 4166

Gatsby now supports an arbitrary GraphQL endpoint as a source which will help: https://www.gatsbyjs.org/packages/gatsby-source-graphql/

You can also use Hasura to give you an instant GraphQL API on Postgres and then query that from your Gatsby app. You can follow the tutorial here.

Step1: Deploy Hasura against your existing Postgres database: https://docs.hasura.io/1.0/graphql/manual/getting-started/using-existing-database.html

Step 2: Install the gatsby-source-graphql plugin for gatsby: https://www.gatsbyjs.org/packages/gatsby-source-graphql/

Step 3: Configure the plugin

{
  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
      },
    },
  ]
}

Step 4: Make the GraphQL query in your component

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
      }
    }
  }

Other links:

Note: I work at Hasura.

Upvotes: 1

Benjie
Benjie

Reputation: 7946

The gatsby-source-pg module connects directly to your database and adds the tables/views/functions/etc to Gatsby's GraphQL API. To use it, install the module:

yarn add gatsby-source-pg

then add to to the plugin list in gatsby-config.js:

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

The connection string can also include username/password, host, port and SSL if you need to connect to remote database; e.g.: postgres://pg_user:pg_pass@pg_host:5432/pg_db?ssl=1

You can query it in your components using the root postgres field, e.g.:

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

Upvotes: 3

dkweave
dkweave

Reputation: 58

What you need to do is implement a source plugin as seen here https://www.gatsbyjs.org/docs/create-source-plugin/.

There are many examples within the gatsby repository that implement the source api. See those for inspiration! Basically you need to translate the contents of your Postgres db into a format gatsby understands. Gatsby calls this format “nodes”.

You could implement a plugin which interfaces with your db directly or with whatever api your node server exposes (graphql, REST etc.).

Upvotes: 3

Related Questions