DEV Community

karthikeyan
karthikeyan

Posted on

3 3

simple way to fetch data from mongoDB using graphQl and Apollo (React JS)

Today i am going to show you how to write simple fetch data from mongoDB using Apollographql

npm i apollo-server-express express graphql lodash mongoose nodemon 
Enter fullscreen mode Exit fullscreen mode

after install these

import { ApolloServer } from 'apollo-server-express';
import { ApolloServerPluginDrainHttpServer } from 'apollo-server-core';
import express from 'express';
import http from 'http';
import {typeDefs} from './utils/typeDefs.js'
import {resolvers} from './utils/resolvers.js'
import mongoose from 'mongoose'

async function startApolloServer(typeDefs, resolvers) {
  const app = express();
  const httpServer = http.createServer(app);
  // Same ApolloServer initialization as before, plus the drain plugin.
  const server = new ApolloServer({
    typeDefs,
    resolvers,
    plugins: [ApolloServerPluginDrainHttpServer({ httpServer })],
  });

  await server.start();
  server.applyMiddleware({
    app,
    path: '/',
  });
  app.use((req,res)=>{
    res.send('Hello frontend')
  })
      //mongoDB connection
  await mongoose.connect('mongodb://localhost:27017/demo')
  console.log('mongoose connected')
  // Modified server startup
  await new Promise(resolve => httpServer.listen({ port: 4000 }, resolve));
  console.log(`πŸš€ Server ready at http://localhost:4000${server.graphqlPath}`);
}

startApolloServer(typeDefs,resolvers);  // start the server 
Enter fullscreen mode Exit fullscreen mode

A schema is a JSON object that defines the the structure and contents of your data

mongoDB models

// const mongoose = require('mongoose');
import mongoose from 'mongoose'

const schema = new mongoose.Schema({
    message:{
        type:String,
        required:true
    },
},{collection:'test'})

export const test = mongoose.model('test',schema) //collection name and schema name

Enter fullscreen mode Exit fullscreen mode

A GraphQL schema is a description of the data clients can request from a GraphQL API. It also defines the queries and mutation functions that the client can use to read and write data from the GraphQL server

import { gql } from "apollo-server-express";

export const typeDefs = gql`
type Query {
    getmessages : [Message!]!
    getlimitmessage(limit : Int) : [Logs!]! // if you want limited no of messages just create a schema like this
}

type Message {
 message: MessageInput! 
}

input MessageInput {
    message: String,
}

type Mutation {
    createMessage(message: MessageInput!): Message
}

Enter fullscreen mode Exit fullscreen mode

resolvers : A resolver is a function that's responsible for populating the data for a single field in your schema

import {test} from './models.js'
import _ from 'lodash'
export const resolvers = {
    Query : {
        getmessages: async ()=>{
          return await test.find() //here i am using lodash 
           //function to get all the messages from the database 
        },
        getlimitmessage: async (limit)=>{
            return await _.takeRight(test,limit) //get limited number of messages from the database
        }
    },
    Mutation : {
        createMessage: (_,args,) => {
            let addMessage = new test(args.message)
            return addMessage.save()
        }
    }
}

Enter fullscreen mode Exit fullscreen mode

SurveyJS custom survey software

JavaScript UI Libraries for Surveys and Forms

SurveyJS lets you build a JSON-based form management system that integrates with any backend, giving you full control over your data and no user limits. Includes support for custom question types, skip logic, integrated CCS editor, PDF export, real-time analytics & more.

Learn more

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more