⚡ 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

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

andrewjbateman / angular-graphql-data Goto Github PK

angular-graphql-data's Introduction

⚡ 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

angular-graphql-data's People

Contributors

Stargazers

Watchers

Recommend Projects

Recommend Topics

Recommend Org

Jobs