urql-computed-exchange-plus 1.0.3

package/package.json

@@ -0,0 +1,77 @@
+{
+  "name": "urql-computed-exchange-plus",
+  "version": "1.0.3",
+  "description": "URQL exchange to allow computed properties in GraphQL queries. Maintained fork with updated dependencies.",
+  "keywords": [
+    "urql",
+    "graphql",
+    "computed",
+    "exchange",
+    "resolver"
+  ],
+  "license": "MIT",
+  "main": "lib/index.js",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/royalcala/urql-computed-exchange-plus"
+  },
+  "scripts": {
+    "clean": "rimraf lib/",
+    "build": "tsc",
+    "build:watch": "tsc -w",
+    "test": "jest",
+    "test:watch": "jest --watch",
+    "test:integration": "jest --config ./jest.integration.config.js",
+    "test:integration:watch": "jest --config ./jest.integration.config.js --watch",
+    "test:performance": "jest --config ./jest.performance.config.js --testTimeout=15000",
+    "test:all": "npm test && npm run test:integration && npm run test:performance",
+    "lint": "eslint src --ext .ts",
+    "lint:fix": "eslint src --ext .ts --fix",
+    "release": "npm run test:all && npm run build && npm publish",
+    "release:patch": "npm version patch && npm run release",
+    "release:minor": "npm version minor && npm run release",
+    "release:major": "npm version major && npm run release",
+    "prepublishOnly": "npm run test:all && npm run build",
+    "prepare": "husky install"
+  },
+  "lint-staged": {
+    "*.{ts,tsx}": [
+      "eslint --ext ts,tsx --format node_modules/eslint-formatter-pretty -c .eslintrc.js --max-warnings=0",
+      "prettier --write"
+    ]
+  },
+  "peerDependencies": {
+    "graphql": "^15.0.0 || ^16.0.0",
+    "urql": "^3.0.0 || ^4.0.0 || ^5.0.0",
+    "wonka": "^6.0.0"
+  },
+  "devDependencies": {
+    "@types/jest": "^30.0.0",
+    "@types/lodash": "^4.17.21",
+    "@types/react": "^18.0.0",
+    "@typescript-eslint/eslint-plugin": "^8.0.0",
+    "@typescript-eslint/parser": "^8.0.0",
+    "eslint": "^9.0.0",
+    "eslint-formatter-pretty": "^7.0.0",
+    "eslint-plugin-jest": "^29.0.0",
+    "fraql": "^1.2.1",
+    "graphql": "^16.0.0",
+    "graphql-tag": "^2.12.6",
+    "husky": "^9.0.0",
+    "import-sort-style-module": "^6.0.0",
+    "jest": "^30.0.0",
+    "lint-staged": "^16.0.0",
+    "prettier": "^3.0.0",
+    "prettier-plugin-import-sort": "^0.0.7",
+    "react": "^18.0.0",
+    "rimraf": "^6.0.0",
+    "ts-jest": "^29.0.0",
+    "typescript": "^5.0.0",
+    "urql": "^5.0.0",
+    "wonka": "^6.0.0"
+  },
+  "dependencies": {
+    "fclone": "^1.0.11",
+    "graphql-anywhere": "^4.2.6"
+  }
+}

package/test/integration/computed-exchange.test.ts

@@ -0,0 +1,541 @@
+import gql from 'fraql';
+import { Client, cacheExchange, createClient, fetchExchange } from 'urql';
+
+import { computedExchange, createEntity } from '../../src';
+import { createMockFetch, runQuery } from '../utils';
+
+describe('urql-computed-exchange', () => {
+  describe('computed-exchange', () => {
+    describe('computedExchange', () => {
+      let client: Client;
+      let entities: any;
+
+      beforeAll(() => {
+        entities = {
+          User: createEntity('User', {
+            fullName: {
+              dependencies: gql`
+                fragment _ on User {
+                  firstName
+                  lastName
+                }
+              `,
+              resolver: (user: any) => `${user.firstName} ${user.lastName}`,
+            },
+          }),
+        };
+
+        client = createClient({
+          url: '/graphql',
+          fetch: createMockFetch()
+            .post('/graphql', {
+              status: 200,
+              json: async () => ({
+                data: {
+                  user: {
+                    id: 1,
+                    firstName: 'Lorem',
+                    lastName: 'Ipsum',
+                    __typename: 'User',
+                  },
+                },
+              }),
+            })
+            .build(),
+          exchanges: [cacheExchange, computedExchange({ entities }), fetchExchange],
+          preferGetMethod: false,
+        });
+      });
+
+      it('runs queries without computed properties', async () => {
+        const query = gql`
+          query User {
+            user(id: "id") {
+              id
+              firstName
+              lastName
+            }
+          }
+        `;
+
+        const result = await runQuery(client, query);
+        const { data } = result;
+        expect(data).toMatchObject({
+          user: {
+            id: 1,
+            firstName: 'Lorem',
+            lastName: 'Ipsum',
+          },
+        });
+      });
+
+      it('runs queries with computed properties', async () => {
+        const query = gql`
+          query User {
+            user(id: "id") {
+              id
+              firstName
+              lastName
+              fullName @computed(type: User)
+            }
+          }
+        `;
+
+        const { data } = await runQuery(client, query);
+        expect(data).toMatchObject({
+          user: {
+            id: 1,
+            firstName: 'Lorem',
+            lastName: 'Ipsum',
+            fullName: 'Lorem Ipsum',
+          },
+        });
+      });
+
+      it('handles complex computed property chains', async () => {
+        const chainEntities = {
+          User: createEntity('User', {
+            fullName: {
+              dependencies: gql`
+                fragment _ on User {
+                  firstName
+                  lastName
+                }
+              `,
+              resolver: (user: any) => `${user.firstName} ${user.lastName}`,
+            },
+            displayName: {
+              dependencies: gql`
+                fragment _ on User {
+                  fullName @computed(type: User)
+                  title
+                }
+              `,
+              resolver: (user: any) => `${user.title} ${user.fullName}`,
+            },
+            signature: {
+              dependencies: gql`
+                fragment _ on User {
+                  displayName @computed(type: User)
+                  department
+                }
+              `,
+              resolver: (user: any) => `${user.displayName} - ${user.department}`,
+            },
+          }),
+        };
+
+        const chainClient = createClient({
+          url: '/graphql',
+          fetch: createMockFetch()
+            .post('/graphql', {
+              status: 200,
+              json: async () => ({
+                data: {
+                  user: {
+                    id: 1,
+                    firstName: 'John',
+                    lastName: 'Doe',
+                    title: 'Dr.',
+                    department: 'Engineering',
+                    __typename: 'User',
+                  },
+                },
+              }),
+            })
+            .build(),
+          exchanges: [cacheExchange, computedExchange({ entities: chainEntities }), fetchExchange],
+          preferGetMethod: false,
+        });
+
+        const query = gql`
+          query User {
+            user(id: "id") {
+              id
+              signature @computed(type: User)
+            }
+          }
+        `;
+
+        const { data } = await runQuery(chainClient, query);
+        expect(data).toMatchObject({
+          user: {
+            id: 1,
+            signature: 'Dr. John Doe - Engineering',
+          },
+        });
+      });
+
+      it('handles multiple computed properties on same object', async () => {
+        const query = gql`
+          query User {
+            user(id: "id") {
+              id
+              fullName @computed(type: User)
+              fullName2: fullName @computed(type: User)
+              fullName3: fullName @computed(type: User)
+            }
+          }
+        `;
+
+        const { data } = await runQuery(client, query);
+        expect(data).toMatchObject({
+          user: {
+            id: 1,
+            fullName: 'Lorem Ipsum',
+            fullName2: 'Lorem Ipsum',
+            fullName3: 'Lorem Ipsum',
+          },
+        });
+      });
+
+      it('handles arrays with computed properties', async () => {
+        const arrayClient = createClient({
+          url: '/graphql',
+          fetch: createMockFetch()
+            .post('/graphql', {
+              status: 200,
+              json: async () => ({
+                data: {
+                  users: [
+                    {
+                      id: 1,
+                      firstName: 'John',
+                      lastName: 'Doe',
+                      __typename: 'User',
+                    },
+                    {
+                      id: 2,
+                      firstName: 'Jane',
+                      lastName: 'Smith',
+                      __typename: 'User',
+                    },
+                  ],
+                },
+              }),
+            })
+            .build(),
+          exchanges: [cacheExchange, computedExchange({ entities }), fetchExchange],
+          preferGetMethod: false,
+        });
+
+        const query = gql`
+          query Users {
+            users {
+              id
+              fullName @computed(type: User)
+            }
+          }
+        `;
+
+        const { data } = await runQuery(arrayClient, query);
+        expect(data).toMatchObject({
+          users: [
+            { id: 1, fullName: 'John Doe' },
+            { id: 2, fullName: 'Jane Smith' },
+          ],
+        });
+      });
+    });
+
+    describe('error handling', () => {
+      it.skip('handles circular dependencies gracefully', async () => {
+        // This test verifies that circular dependencies don't cause infinite loops
+        // and that the exchange fails gracefully rather than hanging
+        const circularEntities = {
+          User: createEntity('User', {
+            fieldA: {
+              dependencies: gql`
+                fragment _ on User {
+                  fieldB @computed(type: User)
+                }
+              `,
+              resolver: (user: any) => `A-${user.fieldB}`,
+            },
+            fieldB: {
+              dependencies: gql`
+                fragment _ on User {
+                  fieldA @computed(type: User)
+                }
+              `,
+              resolver: (user: any) => `B-${user.fieldA}`,
+            },
+          }),
+        };
+
+        const circularClient = createClient({
+          url: '/graphql',
+          fetch: createMockFetch()
+            .post('/graphql', {
+              status: 200,
+              json: async () => ({
+                data: {
+                  user: {
+                    id: 1,
+                    __typename: 'User',
+                  },
+                },
+              }),
+            })
+            .build(),
+          exchanges: [cacheExchange, computedExchange({ entities: circularEntities }), fetchExchange],
+          preferGetMethod: false,
+        });
+
+        const query = gql`
+          query User {
+            user(id: "id") {
+              id
+              fieldA @computed(type: User)
+            }
+          }
+        `;
+
+        // The test should complete within a reasonable time and not hang
+        // We expect either an error result or the query to fail gracefully
+        const startTime = Date.now();
+        
+        try {
+          const result = await runQuery(circularClient, query);
+          const endTime = Date.now();
+          
+          // Should complete quickly (within 5 seconds)
+          expect(endTime - startTime).toBeLessThan(5000);
+          
+          // Should have an error due to circular dependency
+          expect(result.error).toBeDefined();
+        } catch (error: any) {
+          const endTime = Date.now();
+          
+          // Should complete quickly (within 5 seconds)
+          expect(endTime - startTime).toBeLessThan(5000);
+          
+          // Should be a circular dependency related error
+          expect(error.message).toMatch(/circular|dependency|iteration|irresoluble/i);
+        }
+      }, 6000); // 6 second timeout
+
+      it('handles missing dependencies gracefully', async () => {
+        const entitiesWithMissingDeps = {
+          User: createEntity('User', {
+            computedField: {
+              dependencies: gql`
+                fragment _ on User {
+                  nonExistentField
+                }
+              `,
+              resolver: (user: any) => user.nonExistentField || 'fallback',
+            },
+          }),
+        };
+
+        const missingDepsClient = createClient({
+          url: '/graphql',
+          fetch: createMockFetch()
+            .post('/graphql', {
+              status: 200,
+              json: async () => ({
+                data: {
+                  user: {
+                    id: 1,
+                    firstName: 'John',
+                    __typename: 'User',
+                  },
+                },
+              }),
+            })
+            .build(),
+          exchanges: [cacheExchange, computedExchange({ entities: entitiesWithMissingDeps }), fetchExchange],
+          preferGetMethod: false,
+        });
+
+        const query = gql`
+          query User {
+            user(id: "id") {
+              id
+              computedField @computed(type: User)
+            }
+          }
+        `;
+
+        const { data } = await runQuery(missingDepsClient, query);
+        expect(data).toMatchObject({
+          user: {
+            id: 1,
+            computedField: 'fallback',
+          },
+        });
+      });
+
+      it('handles resolver errors gracefully', async () => {
+        const entitiesWithErrorResolver = {
+          User: createEntity('User', {
+            errorField: {
+              dependencies: gql`
+                fragment _ on User {
+                  firstName
+                }
+              `,
+              resolver: () => {
+                throw new Error('Resolver error');
+              },
+            },
+          }),
+        };
+
+        const errorClient = createClient({
+          url: '/graphql',
+          fetch: createMockFetch()
+            .post('/graphql', {
+              status: 200,
+              json: async () => ({
+                data: {
+                  user: {
+                    id: 1,
+                    firstName: 'John',
+                    __typename: 'User',
+                  },
+                },
+              }),
+            })
+            .build(),
+          exchanges: [cacheExchange, computedExchange({ entities: entitiesWithErrorResolver }), fetchExchange],
+          preferGetMethod: false,
+        });
+
+        const query = gql`
+          query User {
+            user(id: "id") {
+              id
+              errorField @computed(type: User)
+            }
+          }
+        `;
+
+        // This should not crash the entire query
+        const result = await runQuery(errorClient, query);
+        // The resolver error should result in the field being omitted or undefined
+        expect(result.data).toMatchObject({
+          user: {
+            id: 1,
+          },
+        });
+        // The errorField should either be undefined or not present
+        expect(result.data?.user?.errorField).toBeUndefined();
+      });
+    });
+
+    describe('caching behavior', () => {
+      let entities: any;
+
+      beforeAll(() => {
+        entities = {
+          User: createEntity('User', {
+            fullName: {
+              dependencies: gql`
+                fragment _ on User {
+                  firstName
+                  lastName
+                }
+              `,
+              resolver: (user: any) => `${user.firstName} ${user.lastName}`,
+            },
+          }),
+        };
+      });
+
+      it('respects cache-first policy for computed properties', async () => {
+        let fetchCount = 0;
+        const cacheClient = createClient({
+          url: '/graphql',
+          fetch: createMockFetch()
+            .post('/graphql', {
+              status: 200,
+              json: async () => {
+                fetchCount++;
+                return {
+                  data: {
+                    user: {
+                      id: 1,
+                      firstName: 'John',
+                      lastName: 'Doe',
+                      __typename: 'User',
+                    },
+                  },
+                };
+              },
+            })
+            .build(),
+          exchanges: [cacheExchange, computedExchange({ entities }), fetchExchange],
+          preferGetMethod: false,
+        });
+
+        const query = gql`
+          query User {
+            user(id: "id") {
+              id
+              fullName @computed(type: User)
+            }
+          }
+        `;
+
+        // First query
+        const result1 = await runQuery(cacheClient, query);
+        expect(result1.data).toMatchObject({
+          user: { id: 1, fullName: 'John Doe' },
+        });
+        expect(fetchCount).toBe(1);
+
+        // Second query should use cache
+        const result2 = await runQuery(cacheClient, query);
+        expect(result2.data).toMatchObject({
+          user: { id: 1, fullName: 'John Doe' },
+        });
+        expect(fetchCount).toBe(1); // Should still be 1 due to caching
+      });
+
+      it('works with different request policies', async () => {
+        let fetchCount = 0;
+        const networkClient = createClient({
+          url: '/graphql',
+          fetch: createMockFetch()
+            .post('/graphql', {
+              status: 200,
+              json: async () => {
+                fetchCount++;
+                return {
+                  data: {
+                    user: {
+                      id: 1,
+                      firstName: 'John',
+                      lastName: 'Doe',
+                      __typename: 'User',
+                    },
+                  },
+                };
+              },
+            })
+            .build(),
+          exchanges: [cacheExchange, computedExchange({ entities }), fetchExchange],
+          preferGetMethod: false,
+        });
+
+        const query = gql`
+          query User {
+            user(id: "id") {
+              id
+              fullName @computed(type: User)
+            }
+          }
+        `;
+
+        // Test with network-only policy
+        const result = await runQuery(networkClient, query, {}, { requestPolicy: 'network-only' });
+        expect(result.data).toMatchObject({
+          user: { id: 1, fullName: 'John Doe' },
+        });
+        expect(fetchCount).toBe(1);
+      });
+    });
+  });
+});

package/test/performance/large-dataset.test.ts

@@ -0,0 +1,66 @@
+import gql from 'fraql';
+import { createClient, cacheExchange, fetchExchange } from 'urql';
+
+import { computedExchange, createEntity } from '../../src';
+import { createMockFetch, runQuery } from '../utils';
+
+describe('Performance Tests', () => {
+  it('handles large datasets efficiently', async () => {
+    const entities = {
+      User: createEntity('User', {
+        fullName: {
+          dependencies: gql`
+            fragment _ on User {
+              firstName
+              lastName
+            }
+          `,
+          resolver: (user: any) => `${user.firstName} ${user.lastName}`,
+        },
+      }),
+    };
+
+    // Generate large dataset
+    const users = Array.from({ length: 1000 }, (_, i) => ({
+      id: i + 1,
+      firstName: `User${i}`,
+      lastName: `LastName${i}`,
+      __typename: 'User',
+    }));
+
+    const client = createClient({
+      url: '/graphql',
+      fetch: createMockFetch()
+        .post('/graphql', {
+          status: 200,
+          json: async () => ({
+            data: { users },
+          }),
+        })
+        .build(),
+      exchanges: [cacheExchange, computedExchange({ entities }), fetchExchange],
+      preferGetMethod: false,
+    });
+
+    const query = gql`
+      query Users {
+        users {
+          id
+          fullName @computed(type: User)
+        }
+      }
+    `;
+
+    const startTime = Date.now();
+    const { data } = await runQuery(client, query);
+    const endTime = Date.now();
+
+    // Should complete within reasonable time
+    expect(endTime - startTime).toBeLessThan(5000);
+    
+    // Verify data integrity
+    expect(data.users).toHaveLength(1000);
+    expect(data.users[0].fullName).toBe('User0 LastName0');
+    expect(data.users[999].fullName).toBe('User999 LastName999');
+  }, 10000);
+});

package/test/utils/index.ts

@@ -0,0 +1,2 @@
+export * from './run-query';
+export * from './simple-mock-fetch';

package/test/utils/run-query.ts

@@ -0,0 +1,15 @@
+import { DocumentNode } from 'graphql';
+import { Client, OperationResult, createRequest } from 'urql';
+import { pipe, subscribe } from 'wonka';
+
+export function runQuery(client: Client, query: string | DocumentNode, variables: any = {}, context: any = {}) {
+  const request = createRequest(query, variables);
+  return new Promise<OperationResult>((resolve) => {
+    pipe(
+      client.executeQuery(request, context),
+      subscribe((res) => {
+        resolve(res);
+      }),
+    );
+  });
+}