lens-protocol · cesarenaldi · Feb 21, 2025
diff --git a/examples/custom-fragments/README.md b/examples/custom-fragments/README.md
@@ -0,0 +1,3 @@
+# Custom Fragments
+
+[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/lens-protocol/lens-sdk/tree/next/examples/custom-fragments)
diff --git a/examples/custom-fragments/index.html b/examples/custom-fragments/index.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="https://cdn.simplecss.org/simple.min.css">
+  </head>
+  <body>
+    <h1>Custom Fragments</h1>
+    <div id="app">Loading...</div>
+    <script type="module">
+      import out from './index.ts';
+      document.querySelector('#app').innerHTML = Array.isArray(out)
+        ? out.map((x) => `<div style="margin-bottom: 16px;">${x}</div>`).join('')
+        : out;
+    </script>
+  </body>
+</html>
diff --git a/examples/custom-fragments/index.ts b/examples/custom-fragments/index.ts
@@ -0,0 +1,42 @@
+import {
+  type Account,
+  type FragmentOf,
+  PublicClient,
+  UsernameFragment,
+  evmAddress,
+  graphql,
+  testnet,
+} from '@lens-protocol/client';
+import { fetchAccount } from '@lens-protocol/client/actions';
+
+const MyAccountFragment = graphql(
+  `
+  fragment Account on Account {
+    __typename
+    handle: username {
+      ...Username
+    }
+  }
+  `,
+  [UsernameFragment],
+);
+
+declare module '@lens-protocol/client' {
+  export interface Account extends FragmentOf<typeof MyAccountFragment> {}
+}
+
+const client = PublicClient.create({
+  environment: testnet,
+  fragments: {
+    Account: MyAccountFragment,
+  },
+});
+
+const account: Account | null = await fetchAccount(client, {
+  address: evmAddress('0x57b62a1571F4F09CDB4C3d93dA542bfe142D9F81'),
+}).unwrapOr(null);
+
+export default [
+  `<h2>${account?.handle?.value}</h2>`,
+  `<pre>${JSON.stringify(account, null, 2)}</pre>`,
+];
diff --git a/examples/custom-fragments/package.json b/examples/custom-fragments/package.json
@@ -0,0 +1,19 @@
+{
+  "name": "example-custom-fragments",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite"
+  },
+  "dependencies": {
+    "@lens-network/sdk": "canary",
+    "@lens-protocol/client": "link:../../packages/client",
+    "@lens-protocol/metadata": "next",
+    "@lens-protocol/storage-node-client": "next",
+    "viem": "^2.21.55"
+  },
+  "devDependencies": {
+    "typescript": "^5.6.3",
+    "vite": "^5.4.11"
+  }
+}
diff --git a/examples/custom-fragments/tsconfig.json b/examples/custom-fragments/tsconfig.json
@@ -0,0 +1,19 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "useDefineForClassFields": true,
+    "lib": ["ESNext", "DOM"],
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "strict": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "esModuleInterop": true,
+    "noEmit": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noImplicitReturns": true,
+    "skipLibCheck": true
+  },
+  "include": ["./"]
+}
diff --git a/packages/client/package.json b/packages/client/package.json
@@ -58,6 +58,7 @@
     "@lens-protocol/types": "workspace:*",
     "@urql/core": "^5.0.8",
     "@urql/exchange-auth": "^2.2.0",
+    "graphql": "^16.9.0",
     "jwt-decode": "^4.0.0",
     "loglevel": "^1.9.2"
   },

diff --git a/packages/client/src/clients.test.ts b/packages/client/src/clients.test.ts
@@ -1,11 +1,18 @@
-import { CurrentSessionQuery, HealthQuery, RefreshMutation, Role } from '@lens-protocol/graphql';
+import {
+  CurrentSessionQuery,
+  HealthQuery,
+  RefreshMutation,
+  Role,
+  UsernameFragment,
+  graphql,
+} from '@lens-protocol/graphql';
 import { url, assertErr, assertOk, signatureFrom } from '@lens-protocol/types';
-import { HttpResponse, graphql, passthrough } from 'msw';
+import * as msw from 'msw';
 import { setupServer } from 'msw/node';
 
 import { afterAll, beforeAll, describe, expect, it } from 'vitest';
 
-import { currentSession } from './actions';
+import { currentSession, fetchAccount } from './actions';
 import { PublicClient } from './clients';
 import { GraphQLErrorCode, UnauthenticatedError, UnexpectedError } from './errors';
 import {
@@ -129,18 +136,18 @@ describe(`Given an instance of the ${PublicClient.name}`, () => {
 
     describe('When a request fails with UNAUTHENTICATED extension code', () => {
       const server = setupServer(
-        graphql.query(
+        msw.graphql.query(
           CurrentSessionQuery,
           (_) =>
-            HttpResponse.json({
+            msw.HttpResponse.json({
               errors: [createGraphQLErrorObject(GraphQLErrorCode.UNAUTHENTICATED)],
             }),
           {
             once: true,
           },
         ),
         // Pass through all other operations
-        graphql.operation(() => passthrough()),
+        msw.graphql.operation(() => msw.passthrough()),
       );
 
       beforeAll(() => {
@@ -173,18 +180,18 @@ describe(`Given an instance of the ${PublicClient.name}`, () => {
 
     describe('When a token refresh fails', () => {
       const server = setupServer(
-        graphql.query(CurrentSessionQuery, (_) =>
-          HttpResponse.json({
+        msw.graphql.query(CurrentSessionQuery, (_) =>
+          msw.HttpResponse.json({
             errors: [createGraphQLErrorObject(GraphQLErrorCode.UNAUTHENTICATED)],
           }),
         ),
-        graphql.mutation(RefreshMutation, (_) =>
-          HttpResponse.json({
+        msw.graphql.mutation(RefreshMutation, (_) =>
+          msw.HttpResponse.json({
             errors: [createGraphQLErrorObject(GraphQLErrorCode.BAD_USER_INPUT)],
           }),
         ),
         // Pass through all other operations
-        graphql.operation(() => passthrough()),
+        msw.graphql.operation(() => msw.passthrough()),
       );
 
       beforeAll(() => {
@@ -211,4 +218,38 @@ describe(`Given an instance of the ${PublicClient.name}`, () => {
       });
     });
   });
+
+  describe.only('When some fragments are provided', () => {
+    it('Then it should replace them in any relevant query', async () => {
+      const BaseAccountFragment = graphql(
+        `fragment BaseAccount on Account {
+          test: address
+        }`,
+      );
+      const AccountFragment = graphql(
+        `fragment Account on Account {
+          ...BaseAccount 
+          username {
+            ...Username
+          }
+        }`,
+        [BaseAccountFragment, UsernameFragment],
+      );
+
+      const client = createPublicClient({
+        fragments: [AccountFragment],
+      });
+
+      const result = await fetchAccount(client, { address: account });
+
+      assertOk(result);
+
+      expect(result.value).toMatchObject({
+        test: account,
+        username: {
+          value: expect.any(String),
+        },
+      });
+    });
+  });
 });
diff --git a/packages/client/src/clients.ts b/packages/client/src/clients.ts
@@ -5,13 +5,15 @@ import type {
   SignedAuthChallenge,
   StandardData,
 } from '@lens-protocol/graphql';
+import type { SwitchAccountRequest } from '@lens-protocol/graphql';
 import type { Credentials, IStorage } from '@lens-protocol/storage';
 import { createCredentialsStorage } from '@lens-protocol/storage';
 import {
   ResultAsync,
   type TxHash,
   errAsync,
   invariant,
+  never,
   okAsync,
   signatureFrom,
 } from '@lens-protocol/types';
@@ -25,10 +27,10 @@ import {
   createClient,
   fetchExchange,
 } from '@urql/core';
+import { type AuthConfig, authExchange } from '@urql/exchange-auth';
+import { type FragmentDefinitionNode, visit } from 'graphql';
 import { type Logger, getLogger } from 'loglevel';
 
-import type { SwitchAccountRequest } from '@lens-protocol/graphql';
-import { type AuthConfig, authExchange } from '@urql/exchange-auth';
 import { type AuthenticatedUser, authenticatedUser } from './AuthenticatedUser';
 import { revokeAuthentication, switchAccount, transactionStatus } from './actions';
 import type { ClientConfig } from './config';
@@ -267,7 +269,66 @@ export class PublicClient<TContext extends Context = Context> extends AbstractCl
     document: TypedDocumentNode<StandardData<TValue>, TVariables>,
     variables: TVariables,
   ): ResultAsync<TValue, UnexpectedError> {
-    return this.resultFrom(this.urql.query(document, variables)).map(takeValue);
+    // document.definitions.map((def) => {
+    //   //@ts-ignore
+    //   if (def.kind === 'FragmentDefinition') {
+    //     console.log(def.name.value);
+    //     if (def.name.value === 'Account') {
+    //       //@ts-ignore
+    //       console.log(JSON.stringify(def.selectionSet, null, 2));
+    //     }
+    //   }
+    // });
+    // console.log(this.context.fragments);
+    const insertionCandidates = new Map<string, FragmentDefinitionNode>();
+
+    const replaced = visit(document, {
+      FragmentDefinition: (node) => {
+        if (insertionCandidates.has(node.name.value)) {
+          insertionCandidates.delete(node.name.value);
+        }
+        if (this.context.fragments.has(node.name.value)) {
+          const [replacement, ...others] =
+            this.context.fragments.get(node.name.value)?.definitions ?? never();
+
+          for (const other of others) {
+            invariant(other.kind === 'FragmentDefinition', 'Expected a FragmentDefinition');
+            insertionCandidates.set(other.name.value, other);
+          }
+
+          return replacement;
+        }
+        return node;
+      },
+      Document: {
+        leave: (node) => {
+          return {
+            ...node,
+            definitions: [...node.definitions, ...insertionCandidates.values()],
+          };
+        },
+      },
+    });
+
+    const usedFragments = new Set<string>();
+    visit(replaced, {
+      FragmentSpread(node) {
+        usedFragments.add(node.name.value);
+      },
+    });
+
+    console.log(usedFragments);
+
+    const cleaned = visit(replaced, {
+      FragmentDefinition(node) {
+        if (usedFragments.has(node.name.value)) {
+          return node;
+        }
+        return null;
+      },
+    });
+
+    return this.resultFrom(this.urql.query(cleaned, variables)).map(takeValue);
   }
 
   /**

diff --git a/packages/client/src/config.ts b/packages/client/src/config.ts
@@ -1,5 +1,6 @@
 import type { EnvironmentConfig } from '@lens-protocol/env';
 import type { IStorageProvider } from '@lens-protocol/storage';
+import type { TypedDocumentNode } from '@urql/core';
 
 /**
  * The client configuration.
@@ -34,4 +35,9 @@ export type ClientConfig = {
    * @defaultValue {@link InMemoryStorageProvider}
    */
   storage?: IStorageProvider;
+
+  /**
+   * The custom fragments to use.
+   */
+  fragments?: TypedDocumentNode[];
 };
diff --git a/packages/client/src/context.ts b/packages/client/src/context.ts
@@ -1,5 +1,8 @@
 import type { EnvironmentConfig } from '@lens-protocol/env';
 import { type IStorageProvider, InMemoryStorageProvider } from '@lens-protocol/storage';
+import { invariant } from '@lens-protocol/types';
+import type { TypedDocumentNode } from '@urql/core';
+
 import type { ClientConfig } from './config';
 
 /**
@@ -11,6 +14,7 @@ export type Context = {
   debug: boolean;
   origin?: string;
   storage: IStorageProvider;
+  fragments: Map<string, TypedDocumentNode>;
 };
 
 /**
@@ -23,5 +27,20 @@ export function configureContext(from: ClientConfig): Context {
     debug: from.debug ?? false,
     origin: from.origin,
     storage: from.storage ?? new InMemoryStorageProvider(),
+    fragments: fragmentsMap(from.fragments),
   };
 }
+
+function fragmentsMap(fragments: TypedDocumentNode[] = []): Map<string, TypedDocumentNode> {
+  const map = new Map<string, TypedDocumentNode>();
+
+  for (const fragment of fragments) {
+    invariant(
+      fragment.definitions[0]?.kind === 'FragmentDefinition',
+      `ClientConfig: Expected a fragment definition, got ${fragment.definitions[0]?.kind}`,
+    );
+    map.set(fragment.definitions[0].name.value, fragment);
+  }
+
+  return map;
+}
diff --git a/packages/client/src/test-utils.ts b/packages/client/src/test-utils.ts
@@ -6,7 +6,7 @@ import { evmAddress } from '@lens-protocol/types';
 import { http, type Account, type Transport, type WalletClient, createWalletClient } from 'viem';
 import { privateKeyToAccount } from 'viem/accounts';
 
-import { GraphQLErrorCode, PublicClient, staging as apiEnv } from '.';
+import { type ClientConfig, GraphQLErrorCode, PublicClient, staging as apiEnv } from '.';
 
 const pk = privateKeyToAccount(import.meta.env.PRIVATE_KEY);
 export const account = evmAddress(import.meta.env.TEST_ACCOUNT);
@@ -20,10 +20,11 @@ export const wallet: WalletClient<Transport, chains.LensNetworkChain, Account> =
 );
 export const signer = evmAddress(wallet.account.address);
 
-export function createPublicClient() {
+export function createPublicClient(config: Partial<ClientConfig> = {}) {
   return PublicClient.create({
     environment: apiEnv,
     origin: 'http://example.com',
+    ...config,
   });
 }
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		# Custom Fragments

		[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/lens-protocol/lens-sdk/tree/next/examples/custom-fragments)