⚡ Angular GraphQL Data

• Angular app to display data from Rick and Morty API using GraphQL with Apollo.
• Server Side Rendering (SSR) added.
• Deployed to Netlify with a good (green) Lighthouse score.
• Note: to open web links in a new window use: ctrl+click on link

📄 Table of contents

• ⚡ Angular GraphQL Data
  • 📄 Table of contents
  • 📚 General info
  • 📷 Screenshots
  • 📶 Technologies
  • 💾 Setup
  • 🔧 Testing
  • 💻 Code Examples
  • 🆒 Features - Frontend
  • 📋 Status, Testing & To-Do List
  • 👏 Inspiration/General Tools
  • 📁 License
  • ✉️ Contact

📚 General info

• GraphQL, a query language for APIs.
• Angular HttpInterceptor used to intercept a HTTP request and show a spinner
• Styling done using SCSS instead of Angular Material, Bootstrap, Tailwind etc.
• Dummy robots.txt file added to fool lighthouse test for Search Engine Optimization (SEO)

📷 Screenshots

📶 Technologies

• Angular framework v16
• Angular Universal v16 Server-Side Rendering(SSR) by a Node Express web server
• Angular Express Engine v16 for running Angular Apps on the server for server side rendering
• SCSS/SASS CSS extension language
• Apollo Angular v3
• ngx-toastr v16 for popup user messages
• ngx-infinite scroll v16
• Google Chrome Lighthouse to check quality of website
• Source of emojis

💾 Setup

• Install dependencies using npm i
• Run ng serve for a non-SSR dev server. Frontend will open at http://localhost:4200/ - refreshes on code changes
• Run npm run dev:ssr for an SSR dev server. Frontend will open at http://localhost:4200/ - refreshes on code changes
• Run npm run lint to lint test entire codebase using ESLint.
• Run npm run build to generate a build file without SSR
• Run npm run build:ssr to generate a build file with SSR. Add defer to browser css file ref.
• Run npm run serve:ssr to see on a dev server http://localhost:4000

🔧 Testing

• Run ng test to run Jasmine unit tests via Karma
• Run ng e2e to execute the end-to-end tests via Protractor.

💻 Code Examples

• data.service.ts function to get API data using GraphQL & Apollo

  getCharactersByPage(pageNum: number): void {
    const QUERY_BY_PAGE = gql`{
      characters(page: ${pageNum}) {
        results {
          id
          name
          status
          species
          gender
          image
        }
      }
    }`;

    this.apollo.watchQuery<any>({
      query: QUERY_BY_PAGE
    }).valueChanges.pipe(
      take(1),
      pluck('data', 'characters'),
      withLatestFrom(this.characters$),
      tap(([apiResponse, characters]) => {
        this.parseCharactersData([...characters, ...apiResponse.results]);
      })
    ).subscribe();

  }

🆒 Features - Frontend

• Angular Universal used to generate static pages using Server Side Rendering (SSR) - to increase display speed and add Search Engine Optimisation (SEO). A normal Angular application executes in the browser, rendering pages in the DOM in response to user actions. Angular Universal executes on the server, generating static application pages that later get bootstrapped on the client. This means that the application generally renders more quickly, giving users a chance to view the application layout before it becomes fully interactive.

📋 Status, Testing & To-Do List

• Status: Working with SSR. Deployed to Netlify
• Testing: n/a
• To-Do: turn strict back on and sort type errors. Improve Lighthouse score.

👏 Inspiration/General Tools

• Tutorial de Angular 11 desde cero 📕 Curso Angular en Español - Graphql API Rick and Morty
• Manejar Local Storage con Angular 11 - #2
• #angular Instalar NGX-TOASTR 🔔 en Angular 11 #3
• Scroll Infinito Angular 11 - Angular curso #4
• Efecto de carga en Angular spinner, loading - Curso práctico Angular 11 #5
• Recuperamos details - Aplicación Ricky and morty API - Angular 11
• ¿Qué es angular universal? - Server Side Rendering (SSR) con Angular Universal
• Primeros pasos con netlify y angular SSR
• THIRUVANANTHAPURAM: How to add eslint to angular 12 project
• Stackoverflow: argument-of-type-null-is-not-assignable-to-parameter-angular

📁 License

• N/A

✉️ Contact

• Repo created by ABateman, email: gomezbateman@yahoo.com