1(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[7258],{15711:function(e,n,t){"use strict";t.r(n),t.d(n,{meta:function(){return o}});var a=t(11527),r=t(58627),i=t(89895),o=(t(17063),{showBreadcrumbs:!1,showTableOfContents:!0,showPrev:!0,showNext:!0}),s=function(e){var n=e.children;return(0,a.jsx)(i.Z,{meta:o,children:n})};function c(e){var n=Object.assign({h1:"h1",p:"p",hr:"hr",em:"em",h2:"h2",h3:"h3",code:"code",pre:"pre",a:"a",strong:"strong"},(0,r.a)(),e.components),t=n.Steps,i=n.MultiCodeBlock,o=n.Alert;return o||l("Alert",!0),i||l("MultiCodeBlock",!0),t||l("Steps",!0),(0,a.jsxs)(a.Fragment,{children:["\n",(0,a.jsx)(n.h1,{children:"TypeScript"}),"\n",(0,a.jsx)(n.p,{children:"Get started with the Lens TypeScript SDK."}),"\n",(0,a.jsx)(n.hr,{}),"\n",(0,a.jsx)(n.p,{children:"The Lens TypeScript SDK is a low-level API client for interacting with the Lens API. It provides a lightweight abstraction over the bare GraphQL API and is suitable for server-to-server communication or very bespoke client-side integrations where the Lens React SDK is not suitable."}),"\n",(0,a.jsxs)(n.p,{children:["Designed with a modular, functional approach, this SDK draws inspiration from the ",(0,a.jsx)(n.em,{children:"viem client-actions architecture"}),". It structures functionality into distinct, reusable actions, each focused on a specific API feature."]}),"\n",(0,a.jsx)(n.h2,{children:"Getting Started"}),"\n",(0,a.jsx)(n.p,{children:"To get started, follow the steps below."}),"\n",(0,a.jsxs)(t,{children:[(0,a.jsx)(n.h3,{children:"Install SDK"}),(0,a.jsxs)(n.p,{children:["First, install the ",(0,a.jsx)(n.code,{children:"@lens-protocol/client"})," package using your package manager of choice."]}),(0,a.jsxs)(i,{children:[(0,a.jsx)(n.pre,{filename:"npm",children:(0,a.jsx)(n.code,{className:"language-bash",children:"npm install @lens-protocol/client@canary\n"})}),(0,a.jsx)(n.pre,{filename:"yarn",children:(0,a.jsx)(n.code,{className:"language-bash",children:"yarn add @lens-protocol/client@canary\n"})}),(0,a.jsx)(n.pre,{filename:"pnpm",children:(0,a.jsx)(n.code,{className:"language-bash",children:"pnpm add @lens-protocol/client@canary\n"})})]}),(0,a.jsx)(n.h3,{children:"Define Fragments"}),(0,a.jsxs)(n.p,{children:["Next, define the structure of the data for the key entities in your application by creating ",(0,a.jsx)(n.a,{href:"https://graphql.org/learn/queries/#fragments",children:"GraphQL fragments"})," that customize the data you retrieve."]}),(0,a.jsx)(o,{tone:"valid",solid:!0,children:(0,a.jsx)(n.p,{children:"This step is critical to keeping your queries efficient and focused, helping\nyou avoid overfetching unnecessary data."})}),(0,a.jsx)(n.p,{children:"See the example below for a few common fragments."}),(0,a.jsxs)(i,{children:[(0,a.jsx)(n.pre,{filename:"fragments/accounts.ts",children:(0,a.jsx)(n.code,{className:"language-ts",children:'import { graphql, MediaImageFragment, UsernameFragment } from "@lens-protocol/react";\n\nexport const AccountMetadataFragment = graphql(\n `\n fragment AccountMetadata on AccountMetadata {\n name\n bio\n\n thumbnail: picture(\n request: { preferTransform: { fixedSize: { height: 128, width: 128 } } }\n )\n picture\n }\n `,\n [MediaImageFragment]\n);\n\nexport const AccountFragment = graphql(\n `\n fragment Account on Account {\n __typename\n username {\n ...Username\n }\n address\n metadata {\n ...AccountMetadata\n }\n }\n `,\n [UsernameFragment, AccountMetadataFragment]\n);\n'})}),(0,a.jsx)(n.pre,{filename:"fragments/posts.ts",children:(0,a.jsx)(n.code,{className:"language-ts",children:'import {\n ArticleMetadataFragment,\n AudioMetadataFragment,\n TextOnlyMetadataFragment,\n ImageMetadataFragment,\n VideoMetadataFragment,\n graphql,\n} from "@lens-protocol/client";\n\nexport const PostMetadataFragment = graphql(\n `\n fragment PostMetadata on PostMetadata {\n __typename\n ... on ArticleMetadata {\n ...Art
1icleMetadata\n }\n ... on AudioMetadata {\n ...AudioMetadata\n }\n ... on TextOnlyMetadata {\n ...TextOnlyMetadata\n }\n ... on ImageMetadata {\n ...ImageMetadata\n }\n ... on VideoMetadata {\n ...VideoMetadata\n }\n }\n `,\n [\n ArticleMetadataFragment,\n AudioMetadataFragment,\n TextOnlyMetadataFragment,\n ImageMetadataFragment,\n VideoMetadataFragment,\n ]\n);\n'})}),(0,a.jsx)(n.pre,{filename:"fragments/images.ts",children:(0,a.jsx)(n.code,{className:"language-ts",children:'import { graphql } from "@lens-protocol/client";\n\nexport const MediaImageFragment = graphql(\n `\n fragment MediaImage on MediaImage {\n __typename\n\n full: item\n\n large: item(request: { preferTransform: { widthBased: { width: 2048 } } })\n\n thumbnail: item(\n request: { preferTransform: { fixedSize: { height: 128, width: 128 } } }\n )\n\n altTag\n license\n type\n }\n `\n);\n'})})]}),(0,a.jsx)(n.p,{children:"Throughout this documentation, you\u2019ll explore additional fragments and fields that you may want to tailor to your needs."}),(0,a.jsxs)(n.p,{children:["See the Custom Fragments ",(0,a.jsx)(n.a,{href:"/protocol/best-practices/custom-fragments",children:"best-practices guide"})," for more information."]}),(0,a.jsx)(n.h3,{children:"TypeScript Definitions"}),(0,a.jsxs)(n.p,{children:["Then, create an ",(0,a.jsx)(n.code,{children:"index.ts"})," where you extend the TypeScript definitions for the entities you are customizing."]}),(0,a.jsx)(n.pre,{filename:"fragments/index.ts",children:(0,a.jsx)(n.code,{className:"language-ts",children:'import type { FragmentOf } from "@lens-protocol/client";\n\nimport { AccountFragment, AccountMetadataFragment } from "./accounts";\nimport { PostMetadataFragment } from "./posts";\nimport { MediaImageFragment } from "./images";\n\ndeclare module "@lens-protocol/client" {\n export interface Account extends FragmentOf<typeof AccountFragment> {}\n export interface AccountMetadata\n extends FragmentOf<typeof AccountMetadataFragment> {}\n export interface MediaImage extends FragmentOf<typeof MediaImageFragment> {}\n export type PostMetadata = FragmentOf<typeof PostMetadataFragment>;\n}\n\nexport const fragments = [\n AccountFragment,\n PostMetadataFragment,\n MediaImageFragment,\n];\n'})}),(0,a.jsx)(n.h3,{children:"Create a PublicClient"}),(0,a.jsxs)(n.p,{children:["Finally, create an instance of the ",(0,a.jsx)(n.code,{children:"PublicClient"})," pointing to the desired environment."]}),(0,a.jsxs)(i,{children:[(0,a.jsx)(n.pre,{filename:"client.ts (Mainnet)",children:(0,a.jsx)(n.code,{className:"language-ts",children:'import { PublicClient, mainnet } from "@lens-protocol/client";\n\nimport { fragments } from "./fragments";\n\nexport const client = PublicClient.create({\n environment: mainnet,\n fragments,\n});\n'})}),(0,a.jsx)(n.pre,{filename:"client.ts (Testnet)",children:(0,a.jsx)(n.code,{className:"language-ts",children:'import { PublicClient, testnet } from "@lens-protocol/client";\n\nimport { fragments } from "./fragments";\n\nexport const client = PublicClient.create({\n environment: testnet,\n fragments,\n});\n'})})]}),(0,a.jsxs)(n.p,{children:["That's it\u2014you can now use the ",(0,a.jsx)(n.code,{children:"@lens-protocol/client/actions"})," to interact with the Lens API."]})]}),"\n",(0,a.jsx)(n.h2,{children:"Additional Options"}),"\n",(0,a.jsxs)(n.p,{children:["Below are some additional options you can pass to the ",(0,a.jsx)(n.code,{children:"PublicClient.create"})," method."]}),"\n",(0,a.jsx)(n.h3,{children:"Origin Header"}),"\n",(0,a.jsxs)(n.p,{children:["The ",(0,a.jsx)(n.a,{href:"../authentication",children:"Authentication Flow"})," requires request to be made with the HTTP Origin header. If you are logging in from an environment (e.g. Node.js) other than a browser, you need to set the ",(0,a.jsx)(n.code,{children:"origin"})," option when creating the client."]}),"\n",(0,a.jsx)(n.pre,{filename:"client.ts",highlight:"8",children:(0,a.jsx)(n.code,{className:"language-ts",children:'import { PublicClient, mainnet } from "@lens-protocol/client";\n\nimport { fragments } from "./fragments";\n\nexport const client = PublicClient.create({\n environment: mainnet,\n fragments,\n origin: "https://myappdomain.xyz",\n});\n'})}),"\n",(0,a.jsx)(n.h3,{children:"Server API Key"}),"\n",(0,a.jsxs)(n.p,{children:["If you need higher rate limits for server-to-server usage of the Lens API, you can generate a Server API Key for your application in the ",(0,a.jsx)(n.a,{href:"https://developer.lens.xyz/apps",children:"Lens Developer Dashboard"}),". Provide this key when creating the client."]}),"\n",(0,a.jsx)(o,{tone:"warning",solid:!0,children:(0,a.jsxs)(n.p,{children:[(0,a.jsx)(n.strong,{children:"DO NOT"})," use the Server API Key in a client-side context. It is meant for\nserver-to-server communication only."]})}),"\n",(0,a.jsx)(n.pre,{filename:"client.ts",highlight:"8",children:(0,a.jsx)(n.code,{className:"language-ts",children:'import { PublicClient, mainnet } from "@lens-protocol/client";\n\nimport { fragments } from "./fragments";\n\nexport const client = PublicClient.create({\n environment: mainnet,\n fragments,\n apiKey: "<SERVER-API-KEY>",\n});\n'})})]})}function l(e,n){throw new Error("Expected "+(n?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}n.default=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};return(0,a.jsx)(s,Object.assign({},e,{children:(0,a.jsx)(c,e)}))}},13805:function(e,n,t){(window.__NEXT_P=window.__NEXT_P||[]).push(["/protocol/getting-started/typescript",function(){return t(15711)}])}},function(e){e.O(0,[9774,3788,9895,2888,179],(function(){return n=13805,e(e.s=n);var n}));var n=e.O();_N_E=n}]);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.