Nsryjdtyk

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?

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.).

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

        }

      }

    }

  }

}

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:

• Boilerplate/tutorial:
  https://github.com/hasura/graphql-engine/tree/master/community/boilerplates/gatsby-postgres-graphql
  


• Blogpost:
  https://blog.hasura.io/create-gatsby-sites-using-graphql-on-postgres-603b5dd1e516
  

Note: I work at Hasura.