Updated dependencies

README.md

@@ -1,5 +1,21 @@
-# Apollo Orbit
+# 🚀 Apollo Orbit
 
-## Packages
-* [Angular](./packages/angular/)
-* [React](./packages/react/)
+## 📦 Packages
+* [🅰️ Angular](./packages/angular/)
+* [⚛️ React](./packages/react/)
+
+## 📚 Documentation
+
+For full documentation, please visit [Apollo Orbit Docs](https://wassim-k.github.io/apollo-orbit).
+
+## 🤝 Contributing
+
+We welcome contributions! You can start by [forking the repository](https://github.com/wassim-k/apollo-orbit/fork).
+
+## 🐛 Issues
+
+If you encounter any bugs, have a feature request, or need help with something specific, please [open an issue](https://github.com/wassim-k/apollo-orbit/issues) on GitHub. Make sure to provide as much detail as possible to help us understand and resolve the issue quickly.
+
+## 📄 License
+
+This project is licensed under the MIT License - see the [LICENSE](https://github.com/wassim-k/apollo-orbit/blob/main/LICENSE) file for details.

graphql.config.js

@@ -0,0 +1,46 @@
+module.exports = {
+  projects: {
+    ngCore: {
+      schema: [
+        'http://localhost:4000/graphql',
+        'integration/angular/projects/core/src/**/*.state.ts'
+      ],
+      documents: [
+        'integration/angular/projects/core/src/**/*.graphql'
+      ],
+      extensions: {
+        customDirectives: [
+          'directive @client on FIELD'
+        ]
+      }
+    },
+    ngEffects: {
+      schema: [
+        'http://localhost:4000/graphql',
+        'integration/angular/projects/effects/src/**/*.state.ts'
+      ],
+      documents: [
+        'integration/angular/projects/effects/src/**/*.graphql'
+      ],
+      extensions: {
+        customDirectives: [
+          'directive @client on FIELD'
+        ]
+      }
+    },
+    react: {
+      schema: [
+        'http://localhost:4000/graphql',
+        'integration/react/src/**/*.state.ts'
+      ],
+      documents: [
+        'integration/react/src/**/*.graphql'
+      ],
+      extensions: {
+        customDirectives: [
+          'directive @client on FIELD'
+        ]
+      }
+    }
+  }
+}

integration/angular/package.json

@@ -14,37 +14,37 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^17.0.0",
-    "@angular/common": "^17.0.0",
-    "@angular/compiler": "^17.0.0",
-    "@angular/core": "^17.0.0",
-    "@angular/forms": "^17.0.0",
-    "@angular/platform-browser": "^17.0.0",
-    "@angular/platform-browser-dynamic": "^17.0.0",
-    "@angular/platform-server": "^17.0.0",
-    "@angular/router": "^17.0.0",
-    "@angular/ssr": "^17.0.0",
+    "@angular/animations": "^18.0.0",
+    "@angular/common": "^18.0.0",
+    "@angular/compiler": "^18.0.0",
+    "@angular/core": "^18.0.0",
+    "@angular/forms": "^18.0.0",
+    "@angular/platform-browser": "^18.0.0",
+    "@angular/platform-browser-dynamic": "^18.0.0",
+    "@angular/platform-server": "^18.0.0",
+    "@angular/router": "^18.0.0",
+    "@angular/ssr": "^18.0.0",
     "@apollo-orbit/angular": "*",
-    "@apollo/client": "^3.10.0",
+    "@apollo/client": "^3.11.2",
     "bufferutil": "^4.0.8",
-    "crypto-hash": "^3.0.0",
+    "crypto-hash": "^3.1.0",
     "decorator-cache-getter": "^1.0.0",
-    "express": "^4.18.2",
+    "express": "^4.19.2",
     "rxjs": "^7.8.1",
     "toastify-js": "1.12.0",
-    "tslib": "^2.6.0",
-    "utf-8-validate": "^6.0.3",
-    "zone.js": "~0.14.2"
+    "tslib": "^2.6.3",
+    "utf-8-validate": "^6.0.4",
+    "zone.js": "~0.14.8"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^17.0.0",
-    "@angular/cli": "^17.0.0",
-    "@angular/compiler-cli": "^17.0.0",
-    "@angular/language-service": "^17.0.0",
+    "@angular-devkit/build-angular": "^18.0.0",
+    "@angular/cli": "^18.0.0",
+    "@angular/compiler-cli": "^18.0.0",
+    "@angular/language-service": "^18.0.0",
     "@apollo-orbit/codegen": "*",
-    "@parcel/watcher": "^2.3.0",
+    "@parcel/watcher": "^2.4.1",
     "@types/express": "^4.17.21",
-    "@types/node": "^20.10.0",
+    "@types/node": "^22.0.2",
     "@types/toastify-js": "^1.12.3"
   }
 }

integration/angular/projects/core/src/main.server.ts

@@ -2,6 +2,9 @@ import { bootstrapApplication } from '@angular/platform-browser';
 import { AppComponent } from './app/app.component';
 import { config } from './app/app.config.server';
 
+// Required for SSR to stabilise because of ApolloClient setting a 10s timeout for suggesting devtools in the console.
+(globalThis as any).__DEV__ = false;
+
 const bootstrap = () => bootstrapApplication(AppComponent, config);
 
 export default bootstrap;

integration/angular/projects/core/src/main.ts

@@ -2,8 +2,5 @@ import { bootstrapApplication } from '@angular/platform-browser';
 import { AppComponent } from './app/app.component';
 import { appConfig } from './app/app.config';
 
-// Required for SSR to stabilise because of ApolloClient setting a 10s timeout for suggesting devtools in the console.
-(globalThis as any).__DEV__ = false;
-
 bootstrapApplication(AppComponent, appConfig)
   .catch(err => console.error(err)); // eslint-disable-line no-console

integration/angular/projects/effects/src/app/app-routing.module.ts

@@ -2,7 +2,10 @@ import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 
 const routes: Routes = [
-  { path: 'lazy', loadChildren: () => import('./lazy/lazy.module').then(m => m.LazyModule) }
+  {
+    path: 'lazy',
+    loadChildren: () => import('./lazy/lazy.routes').then(m => m.LAZY_ROUTES)
+  }
 ];
 
 @NgModule({

integration/angular/projects/effects/src/app/lazy/lazy.component.html

@@ -1,8 +1,8 @@
 @if (lazyQuery | async; as lazyResult) {
-  @if (lazyResult.loading) {
-    <p>Loading lazy...</p>
-  }
-  @if (lazyResult.data?.lazy === true) {
-    <p>Lazy loaded</p>
-  }
+@if (lazyResult.loading) {
+<p>Loading lazy...</p>
+}
+@if (lazyResult.data?.lazy === true) {
+<p>Lazy loaded</p>
+}
 }

integration/angular/projects/effects/src/app/lazy/lazy.component.ts

@@ -1,3 +1,4 @@
+import { AsyncPipe } from '@angular/common';
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { Apollo } from '@apollo-orbit/angular';
 import { LazyQuery } from '../graphql';
@@ -6,7 +7,9 @@ import { LazyQuery } from '../graphql';
   selector: 'app-lazy',
   templateUrl: './lazy.component.html',
   styleUrls: ['./lazy.component.scss'],
-  changeDetection: ChangeDetectionStrategy.OnPush
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [AsyncPipe]
 })
 export class LazyComponent {
   public lazyQuery = this.apollo.watchQuery(new LazyQuery());

integration/angular/projects/effects/src/app/lazy/lazy.routes.ts

@@ -0,0 +1,14 @@
+import { Routes } from '@angular/router';
+import { provideStates } from '@apollo-orbit/angular';
+import { LazyComponent } from './lazy.component';
+import { lazyState } from './states/lazy/lazy.state';
+
+export const LAZY_ROUTES: Routes = [
+  {
+    path: '',
+    component: LazyComponent,
+    providers: [
+      provideStates(lazyState)
+    ]
+  }
+];

integration/angular/projects/effects/src/app/lazy/states/lazy/gql/lazy.graphql

@@ -1,3 +1,3 @@
 query Lazy {
-    lazy @client
+  lazy @client
 }

integration/angular/projects/effects/src/app/lazy/states/lazy/lazy.state.ts

@@ -1,14 +1,13 @@
-import { state } from '@apollo-orbit/angular';
-import gql from 'graphql-tag';
+import { gql, state } from '@apollo-orbit/angular';
 import { timer } from 'rxjs';
 import { map } from 'rxjs/operators';
 
 export const lazyState = () => state(descriptor => descriptor
   .typeDefs(gql`
     extend type Query {
-        lazy: Boolean!
-    }`
-  )
+      lazy: Boolean!
+    }
+  `)
   .resolver(['Query', 'lazy'], (rootValue, args, context, info) => {
     return timer(2000).pipe(map(() => true));
   })

integration/angular/projects/effects/src/app/library/states/book.state.ts

@@ -12,8 +12,8 @@ export const bookState = () => {
     .typeDefs(gql`
       extend type Book {
         displayName: String!
-      }`
-    )
+      }
+    `)
     .resolver(['Book', 'displayName'], (rootValue: Book, args, context, info): Book['displayName'] => {
       return displayName(rootValue);
     })

integration/angular/projects/effects/src/app/states/theme/theme.state.ts

@@ -1,6 +1,5 @@
 import { inject } from '@angular/core';
-import { state } from '@apollo-orbit/angular';
-import gql from 'graphql-tag';
+import { gql, state } from '@apollo-orbit/angular';
 import { ThemeName, ThemeQuery } from '../../graphql';
 import { Toastify } from '../../services/toastify.service';
 import { ThemeToggledAction, ToggleThemeAction } from './theme.actions';
@@ -23,8 +22,8 @@ export const themeState = () => {
 
       extend type Query {
         theme: Theme!
-      }`
-    )
+      }
+    `)
     .typePolicies({
       Theme: {
         fields: {

integration/react/package.json

@@ -15,7 +15,7 @@
   },
   "devDependencies": {
     "@types/toastify-js": "^1.12.3",
-    "@parcel/watcher": "^2.3.0",
+    "@parcel/watcher": "^2.4.1",
     "graphql-tag": "^2.12.6"
   },
   "browserslist": {

integration/react/src/lazy/states/lazy/lazy.state.ts

@@ -8,8 +8,8 @@ export const lazyState = state(descriptor => descriptor
   .typeDefs(gql`
     extend type Query {
       lazy: String!
-    }`)
-
+    }
+  `)
   .resolver(
     ['Query', 'lazy'],
     (rootValue, args, context, info): Promise<Query['lazy']> => {

integration/react/src/library/states/book.state.ts

@@ -1,7 +1,7 @@
 import { state } from '@apollo-orbit/react';
 import { gql } from '@apollo/client';
 import shortid from 'shortid';
-import { AddBookDocument, AddBookMutation, Book, BooksDocument } from '../../graphql';
+import { AddBookDocument, Book, BooksDocument } from '../../graphql';
 
 const Toastify = require('toastify-js'); // eslint-disable-line @typescript-eslint/no-var-requires
 
@@ -14,18 +14,19 @@ export const bookState = state(descriptor => descriptor
   .typeDefs(gql`
       extend type Book {
         displayName: String!
-    }`)
+    }
+  `)
 
   .resolver(
     ['Book', 'displayName'],
     (rootValue: Book, args, context, info): Book['displayName'] => {
       return getDisplayName(rootValue);
     })
 
-  .optimisticResponse(AddBookDocument, ({ book }): AddBookMutation => ({
-    __typename: 'Mutation',
+  .optimisticResponse(AddBookDocument, ({ book }) => ({
+    __typename: 'Mutation' as const,
     addBook: {
-      __typename: 'Book',
+      __typename: 'Book' as const,
       id: shortid.generate(),
       displayName: getDisplayName(book as Book),
       genre: book.genre ?? null,