CODEWITHSUNDEEP
javascriptreactjsmongodbgraphql-jsgatsby
Joss Classey
Joss Classey

Reputation: 1062

Stuck trying to fetch data from MongoDB into Gatsby using `gatsby-source-mongodb`

So there seems to be almost no detailed documentation on how to do this. Basically all I have to guide me is this. I've followed it up to Mapping mediatype feature, at which point I've become stuck. It gives one example: fetching data from a collection for the purpose of using markdown. But this isn't what I'm trying to achieve.

Basically what I want to do is import a couple of collections from Mongo, which I intend to pull into my Gatsby app — possibly using GraphQL.

So far, this is what I've done to my gatsby-config.js:

    {
      resolve: `gatsby-source-mongodb`,
      options: {
        dbName: `REDACTED`,
        collection: `articles`,
        map: { articles: { /* WHAT DO I DO HERE? */ } }
      },
      server: { address: `REDACTED`, port: 43532 },
      auth: { user: `REDACTED`, password: `REDACTED` },
      extraParams: { replicaSet: `test-shard-0`, ssl: true, authSource: `admin` }
    }

After this I then need find a way of querying the imported collection, which I have no real idea how to do.

Many thanks in advance for any help offered!

Upvotes: 0

Views: 2520

Answers (2)

Joss Classey
Joss Classey

Reputation: 1062

Firstly, one of the main errors in my question was that I was putting server, auth, and extraParams outside of the options object.

The below config enabled me to get Atlas working correctly:

{
    resolve: `gatsby-source-mongodb`,
    options: {
        dbName: `your-database-name`,
        collection: [`yourCollection1`, `yourCollection2`],
        server: { address: 'cluster0-shard-00-01-XXXX.mongodb.net', port: 27017},
        auth: { user: 'yourUserName', password: 'yourPassword' },
        extraParams: { replicaSet: 'Cluster0-shard-0', ssl: true, authSource: `admin`, retryWrites: true }
    }      
}

Note: The replicaSet parameter must match the beginning of your address (as shown in the example). Also you can find your cluster URL by clicking the CONNECT button on your cluster's main info panel at cloud.mongodb.com. (Picture below)

enter image description here

Upvotes: 2

ksav
ksav

Reputation: 20830

The docs seem pretty clear.

Basically what I want to do is import a couple of collections from Mongo,

// In your gatsby-config.js
module.exports = {
  plugins: [
    {
      resolve: `gatsby-source-mongodb`,
      options: { dbName: `local`, collection: [`documents`, `vehicles`] },
    },
  ],
}

After this I then need find a way of querying the imported collection

query {
  allMongodbLocalDocuments {
    edges {
      node {
        id
        url
        name
      }
    }
  }
}

Note: The query allMongodbLocalDocuments might differ for your case based on your dbName. But you should be able to find the available queries in GraphiQL (http://localhost:8000/___graphql)

Now you should be able to test the above query in GraphiQL.

Then, have a look at the gatsby using mongodb example project. In gatsby-node.js they use the above query to then create a page for each node in the query from the template at ./src/templates/item.js

Upvotes: 1

Related Questions