Apollo Server for Mocking

Description

Apollo Server is a JavaScript program, serving GraphQL data

Motivation

Due to the fact, the backend stack takes a time to setup, we just wanna mock a server with our scheme and some demo data to fast deliver some API for the frontend

Setup

• We follow straight https://www.apollographql.com/docs/apollo-server/getting-started/
• Create a folder called backend-mock, went into it
• npm init –yes
• npm install apollo-server graqhql (I had to fixate to graphql@^14.2.1)
• create the mock server like so: index.js

const { ApolloServer, gql } = require("apollo-server");

// Step 3: Define your GraphQL schema
// A schema is a collection of type definitions (hence "typeDefs")
// that together define the "shape" of queries that are executed against
// your data.
const typeDefs = gql`
  "This is a section"
  type Section {
    id: String!
    name: String
  }

  type Query {
    getSections: [Section]
  }

  schema {
    query: Query
  }
`;

// Step 4: Define your data set
const sections = [
  {
    id: "1",
    name: "1",
  },
  {
    id: "2",
    name: "2",
  },
];

// Step 5: Define a resolver
// Resolvers define the technique for fetching the types defined in the
// schema. This resolver retrieves books from the "books" array above.
const resolvers = {
  Query: {
    getSections: () => sections,
  },
};

// Step 6: Create an instance of ApolloServer
// The ApolloServer constructor requires two parameters: your schema
// definition and your set of resolvers.
const server = new ApolloServer({ typeDefs, resolvers });

// The `listen` method launches a web server.
server.listen().then(({ url }) => {
  console.log(`🚀  Server ready at ${url}`);
});

• Visit http://localhost:4000/ and perform a query

# Write your query or mutation here
{
  getSections {
    id
    name
  }
}

• The result should look like this

Frontend changes

• We go to frontend/src/app/graphql.module.ts and change the uri to http://localhost:4000/
• Now call ng serve in frontend directory
• head over to http://localhost:4200/
• Observation: nothing to see, now we might want to debug: Press F12

• After Searching, what this even means: we have different data in the model and the template – we do a quick fix, which is not 100% accurate – just because it works for now: main-page.components.ts

import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs';
import { flatMap } from 'rxjs/operators';
import { Section, ListSectionsGQL } from '../generated/graphql';

@Component({
  selector: 'app-main-page',
  templateUrl: './main-page.component.html',
  styleUrls: ['./main-page.component.scss'],
})
export class MainPageComponent implements OnInit {
  sections: Observable<Section[]>;

  // Dependency Injection of GQL
  constructor(private gql: ListSectionsGQL) {}

  ngOnInit() {
    this.sections = this.gql
      .watch()
      .valueChanges.pipe(flatMap((result) => Array.of(result.data.getSections)));
  }
}

• Ok this seems to work now – at least we know now, that our generated GraphQL types are working as expected. That’s gonna be a long way to go.
• Move the .gitignore file from frontend one directory up, because we now have another Node project with modules – ideally do never commit node_modules directory