lens-protocol · cesarenaldi · Dec 26, 2024 · Dec 26, 2024 · Dec 26, 2024 · Jan 7, 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,41 @@
+import 'viem/window';
+
+import {
+  type FragmentOf,
+  PublicClient,
+  evmAddress,
+  graphql,
+  testnet as protocolTestnet,
+} from '@lens-protocol/client';
+import { fetchAccount } from '@lens-protocol/client/actions';
+
+const MyAccountFragment = graphql(
+  `fragment Account on Account {
+    __typename
+    address
+    username {
+      value
+    }
+    metadata {
+      __typename
+      name
+      picture
+    }
+  }`,
+);
+
+type MyAccount = FragmentOf<typeof MyAccountFragment>;
+
+const client = PublicClient.create({
+  environment: protocolTestnet,
+  accountFragment: MyAccountFragment,
+});
+
+const account: MyAccount | null = await fetchAccount(client, {
+  address: evmAddress('0x57b62a1571F4F09CDB4C3d93dA542bfe142D9F81'),
+}).unwrapOr(null);
+
+export default [
+  `<h2>${account?.username?.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": "file:../../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/src/actions/account.ts b/packages/client/src/actions/account.ts
@@ -33,12 +33,10 @@ import type {
 import {
   AccountFeedsStatsQuery,
   AccountGraphsStatsQuery,
-  AccountQuery,
   AccountStatsQuery,
   AccountsAvailableQuery,
   AccountsBlockedQuery,
   AccountsBulkQuery,
-  AccountsQuery,
   BlockMutation,
   CreateAccountWithUsernameMutation,
   EnableSignlessMutation,
@@ -50,10 +48,13 @@ import {
   UnblockMutation,
   UndoRecommendAccountMutation,
   UnmuteAccountMutation,
+  accountQuery,
+  accountsQuery,
 } from '@lens-protocol/graphql';
 import type { ResultAsync } from '@lens-protocol/types';
 
 import type { AnyClient, SessionClient } from '../clients';
+import type { Context } from '../context';
 import type { UnauthenticatedError, UnexpectedError } from '../errors';
 
 /**
@@ -71,11 +72,11 @@ import type { UnauthenticatedError, UnexpectedError } from '../errors';
  * @param request - The Account query request.
  * @returns The Account or `null` if it does not exist.
  */
-export function fetchAccount(
-  client: AnyClient,
+export function fetchAccount<TAccount extends Account>(
+  client: AnyClient<Context<TAccount>>,
   request: AccountRequest,
-): ResultAsync<Account | null, UnexpectedError> {
-  return client.query(AccountQuery, { request });
+): ResultAsync<TAccount | null, UnexpectedError> {
+  return client.query(accountQuery([client.context.accountFragment]), { request });
 }
 
 /**
@@ -84,18 +85,24 @@ export function fetchAccount(
  * Using a {@link SessionClient} will yield {@link Account#operations} specific to the authenticated Account.
  *
  * ```ts
- * const result = await fetchAccounts(anyClient);
+ * const result = await fetchAccounts(anyClient, {
+ *   filter: {
+ *     searchBy: {
+ *       localNameQuery: 'stani',
+ *     }
+ *   }
+ * });
  * ```
  *
  * @param client - Any Lens client.
  * @param request - The query request.
  * @returns The list of accounts.
  */
-export function fetchAccounts(
-  client: AnyClient,
+export function fetchAccounts<TAccount extends Account>(
+  client: AnyClient<Context<TAccount>>,
   request: AccountsRequest = {},
-): ResultAsync<Paginated<Account> | null, UnexpectedError> {
-  return client.query(AccountsQuery, { request });
+): ResultAsync<Paginated<TAccount> | null, UnexpectedError> {
+  return client.query(accountsQuery([client.context.accountFragment]), { request });
 }
 
 /**

diff --git a/packages/client/src/actions/authentication.ts b/packages/client/src/actions/authentication.ts
@@ -14,14 +14,16 @@ import {
   AuthenticatedSessionsQuery,
   CurrentSessionQuery,
   LegacyRolloverRefreshMutation,
-  MeQuery,
   RefreshMutation,
   RevokeAuthenticationMutation,
   SwitchAccountMutation,
+  meQuery,
 } from '@lens-protocol/graphql';
 import type { ResultAsync } from '@lens-protocol/types';
 
+import type { Account } from '@lens-protocol/graphql';
 import type { AnyClient, SessionClient } from '../clients';
+import type { Context } from '../context';
 import type { UnauthenticatedError, UnexpectedError } from '../errors';
 
 /**
@@ -151,8 +153,8 @@ export function switchAccount(
  * @param client - The session client for the authenticated Account.
  * @returns The details of the authenticated Account.
  */
-export function fetchMeDetails(
-  client: SessionClient,
-): ResultAsync<MeResult, UnauthenticatedError | UnexpectedError> {
-  return client.query(MeQuery, {});
+export function fetchMeDetails<TAccount extends Account>(
+  client: SessionClient<Context<TAccount>>,
+): ResultAsync<MeResult<TAccount>, UnauthenticatedError | UnexpectedError> {
+  return client.query(meQuery([client.context.accountFragment]), {});
 }
diff --git a/packages/client/src/actions/posts.ts b/packages/client/src/actions/posts.ts
@@ -1,40 +1,42 @@
 import type {
+  Account,
   AccountPostReaction,
   ActionInfo,
   AnyPost,
   Paginated,
   Post,
   PostActionsRequest,
   PostBookmarksRequest,
+  PostEdit,
+  PostEditsRequest,
+  PostFields,
+  PostReactionStatus,
+  PostReactionStatusRequest,
   PostReactionsRequest,
   PostReferencesRequest,
   PostRequest,
+  PostTagsRequest,
   PostsRequest,
+  WhoActedOnPostQueryRequest,
+  WhoReferencedPostRequest,
 } from '@lens-protocol/graphql';
 import {
   PostActionsQuery,
-  PostBookmarksQuery,
   PostEditsQuery,
-  PostQuery,
   PostReactionStatusQuery,
   PostReactionsQuery,
-  PostReferencesQuery,
   PostTagsQuery,
-  PostsQuery,
   WhoActedOnPostQuery,
   WhoReferencedPostQuery,
+  postBookmarksQuery,
+  postQuery,
+  postReferencesQuery,
+  postsQuery,
 } from '@lens-protocol/graphql';
 import type { ResultAsync } from '@lens-protocol/types';
 
-import type { PostTagsRequest } from '@lens-protocol/graphql';
-import type { PostReactionStatusRequest } from '@lens-protocol/graphql';
-import type { PostReactionStatus } from '@lens-protocol/graphql';
-import type { WhoReferencedPostRequest } from '@lens-protocol/graphql';
-import type { Account } from '@lens-protocol/graphql';
-import type { WhoActedOnPostQueryRequest } from '@lens-protocol/graphql';
-import type { PostEditsRequest } from '@lens-protocol/graphql';
-import type { PostEdit } from '@lens-protocol/graphql';
 import type { AnyClient, SessionClient } from '../clients';
+import type { Context } from '../context';
 import type { UnauthenticatedError, UnexpectedError } from '../errors';
 
 /**
@@ -53,11 +55,14 @@ import type { UnauthenticatedError, UnexpectedError } from '../errors';
  * @param request - The query request.
  * @returns The Post or `null` if it does not exist.
  */
-export function fetchPost(
-  client: AnyClient,
+export function fetchPost<TAccount extends Account, TPostFields extends PostFields>(
+  client: AnyClient<Context<TAccount, TPostFields>>,
   request: PostRequest,
-): ResultAsync<AnyPost | null, UnexpectedError> {
-  return client.query(PostQuery, { request });
+): ResultAsync<AnyPost<TPostFields, TAccount> | null, UnexpectedError> {
+  return client.query(
+    postQuery([client.context.postFieldsFragment, client.context.accountFragment]),
+    { request },
+  );
 }
 
 /**
@@ -82,7 +87,7 @@ export function fetchPosts(
   client: AnyClient,
   request: PostsRequest,
 ): ResultAsync<Paginated<AnyPost>, UnexpectedError> {
-  return client.query(PostsQuery, { request });
+  return client.query(postsQuery, { request });
 }
 
 /**
@@ -138,7 +143,7 @@ export function fetchPostBookmarks(
   client: SessionClient,
   request: PostBookmarksRequest = {},
 ): ResultAsync<Paginated<AnyPost>, UnexpectedError | UnauthenticatedError> {
-  return client.query(PostBookmarksQuery, { request });
+  return client.query(postBookmarksQuery, { request });
 }
 
 /**
@@ -158,7 +163,7 @@ export function fetchPostReferences(
   client: AnyClient,
   request: PostReferencesRequest,
 ): ResultAsync<Paginated<AnyPost>, UnexpectedError | UnauthenticatedError> {
-  return client.query(PostReferencesQuery, { request });
+  return client.query(postReferencesQuery, { request });
 }
 
 /**

diff --git a/packages/client/src/actions/timeline.ts b/packages/client/src/actions/timeline.ts
@@ -5,7 +5,7 @@ import type {
   TimelineItem,
   TimelineRequest,
 } from '@lens-protocol/graphql';
-import { TimelineHighlightsQuery, TimelineQuery } from '@lens-protocol/graphql';
+import { timelineHighlightsQuery, timelineQuery } from '@lens-protocol/graphql';
 import type { ResultAsync } from '@lens-protocol/types';
 
 import type { AnyClient } from '../clients';
@@ -28,7 +28,7 @@ export function fetchTimeline(
   client: AnyClient,
   request: TimelineRequest,
 ): ResultAsync<Paginated<TimelineItem> | null, UnexpectedError> {
-  return client.query(TimelineQuery, { request });
+  return client.query(timelineQuery, { request });
 }
 
 /**
@@ -48,5 +48,5 @@ export function fetchTimelineHighlights(
   client: AnyClient,
   request: TimelineHighlightsRequest,
 ): ResultAsync<Paginated<AnyPost>, UnexpectedError> {
-  return client.query(TimelineHighlightsQuery, { request });
+  return client.query(timelineHighlightsQuery, { request });
 }
diff --git a/packages/client/src/clients.ts b/packages/client/src/clients.ts
@@ -32,7 +32,7 @@ import { type AuthConfig, authExchange } from '@urql/exchange-auth';
 import { type AuthenticatedUser, authenticatedUser } from './AuthenticatedUser';
 import { switchAccount, transactionStatus } from './actions';
 import type { ClientConfig } from './config';
-import { type Context, configureContext } from './context';
+import { type Context, type ContextFrom, configureContext } from './context';
 import {
   AuthenticationError,
   GraphQLErrorCode,
@@ -151,7 +151,9 @@ export class PublicClient<TContext extends Context = Context> extends AbstractCl
    * @param options - The options to configure the client.
    * @returns The new instance of the client.
    */
-  static create(options: ClientConfig): PublicClient<Context> {
+  static create<TConfig extends ClientConfig>(
+    options: TConfig,
+  ): PublicClient<ContextFrom<TConfig>> {
     return new PublicClient(configureContext(options));
   }
 

diff --git a/packages/client/src/config.ts b/packages/client/src/config.ts
@@ -1,10 +1,15 @@
 import type { EnvironmentConfig } from '@lens-protocol/env';
+import type { Account, PostFields } from '@lens-protocol/graphql';
+import type { FragmentDocumentFor } from '@lens-protocol/graphql';
 import type { IStorageProvider } from '@lens-protocol/storage';
 
 /**
  * The client configuration.
  */
-export type ClientConfig = {
+export type ClientConfig<
+  TAccount extends Account = Account,
+  TPostFields extends PostFields = PostFields,
+> = {
   /**
    * The environment configuration to use (e.g. `mainnet`, `testnet`).
    */
@@ -27,11 +32,22 @@ export type ClientConfig = {
    * Use this to set the `Origin` header for requests from non-browser environments.
    */
   origin?: string;
-
   /**
    * The storage provider to use.
    *
    * @defaultValue {@link InMemoryStorageProvider}
    */
   storage?: IStorageProvider;
+  /**
+   * The Account Fragment to use.
+   *
+   * @defaultValue {@link AccountFragment}
+   */
+  accountFragment?: FragmentDocumentFor<TAccount, 'Account'>;
+  /**
+   * The Post Fragment to use.
+   *
+   * @defaultValue {@link PostFragment}
+   */
+  postFieldsFragment?: FragmentDocumentFor<TPostFields, 'Post', 'PostFields'>;
 };
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)