# TypeScript Client (ESM)

https://api-docs.lumar.io/docs/graphql-clients/typescript-esm

### Setup TypeScript project

We will be using [graphql-codegen](https://www.graphql-code-generator.com/) to generate TypeScript types and operations SDK for interacting with API with only the data that we need, and making requests using the generated SDK with [graphql-request](https://github.com/prisma-labs/graphql-request).

```bash
# Initialize new project
$ npm init -y
$ npm pkg set type="module"
# Add dependencies
$ npm add graphql @graphql-codegen/cli @graphql-codegen/typescript-operations @graphql-codegen/typescript-graphql-request graphql-request typescript ts-node
# Download the latest GraphQL API schema
$ curl https://api.lumar.io/schema.graphql > schema.graphql
# Generate TypeScript config
$ npm exec -- tsc --init --module node16 --moduleResolution node16
```

```yml title="codegen.yml"
overwrite: true
schema: "schema.graphql"
documents: "src/**/*.graphql"
generates:
  src/sdk.ts:
    plugins:
      - "typescript"
      - "typescript-operations"
      - "typescript-graphql-request"
    config:
      scalars:
        BigInt: "number"
        CompareToCrawl: "string | number"
        DateTime: "string"
        JSON: "any"
        JSONObject: "any"
        ObjectID: "string | number"
        Upload: "File"
      strictScalars: true
      documentMode: string
```

Example operations that we will be generating SDK for and running queries and mutations against Lumar GraphQL API:

```graphql title="src/operations.graphql"
mutation LoginWithUserKey($input: CreateSessionUsingUserKeyInputType!) {
  createSessionUsingUserKey(input: $input) {
    expiresAt
    token
  }
}

query MyAccounts {
  me {
    accounts(first: 10) {
      nodes {
        id
        name
      }
      totalCount
    }
  }
}
```

### Setup environment variables for API authentication

Create a [user key](/docs/graphql/authentication.md#creating-api-user-key) for API authentication and export required environment variables:

```bash
export LUMAR_USER_KEY_ID=
export LUMAR_SECRET=
```

### Writing your TypeScript script for making API calls

```typescript title="src/script.ts"


async function main() {
  const client = new GraphQLClient("https://api.lumar.io/graphql", {
    headers: {
      "apollographql-client-name": "your-client-name",
    },
  });
  const sdk = getSdk(client);

  // highlight-next-line
  const { createSessionUsingUserKey } = await sdk.LoginWithUserKey({
    input: {
      userKeyId: process.env.LUMAR_USER_KEY_ID!,
      secret: process.env.LUMAR_SECRET!,
    },
  });

  client.setHeader("x-auth-token", createSessionUsingUserKey.token);

  console.log("My accounts are:");
  // highlight-next-line
  const accounts = await sdk.MyAccounts();
  console.log(JSON.stringify(accounts, null, 2));
}

if (!process.env.LUMAR_USER_KEY_ID || !process.env.LUMAR_SECRET) {
  console.error("You must set the LUMAR_USER_KEY_ID and LUMAR_SECRET environment variables.");
  process.exit(1);
}

(async () => {
  await main();
  process.exit(0);
})().catch(error => {
  console.error("Unexpected error has occurred!", error);
  process.exit(1);
});
```

Generate TypeScript types and SDK operations. You should run the command again after any changes to the `operations.graphql` file.

```bash
npm exec -- graphql-codegen
```

Running your script:

```bash
npm exec --silent -- node --loader ts-node/esm src/script.ts
```

Successful run will print out something like:

```json
My accounts are:
{
  "me": {
    "accounts": {
      "nodes": [
        {
          "id": "TjAwN0FjY291bnQyMTkyMQ",
          "name": "Your account name"
        }
      ]
      "totalCount": 1,
    }
  }
}
```

Code from this example can be found on our [Github](https://github.com/deepcrawl/api-docs-examples/tree/main/typescript-esm).