Skip to content

Latest commit

 

History

History
237 lines (186 loc) · 5.29 KB

javascript-browser.md

File metadata and controls

237 lines (186 loc) · 5.29 KB
description layout
Learn how to integrate Airstack APIs to your frontend TypeScript/JavaScript application using the Airstack Web SDK.
title description tableOfContents outline pagination
visible
true
visible
true
visible
true
visible
visible
true

🌐 JavaScript (Browser)

In this tutorial, you will learn how to start integrating Airstack API into your frontend TypeScript/JavaScript application.

Table Of Contents

Step 0: Pre-requisites

Step 1: Install Airstack Web SDK

Use a package manager to install the Airstack Web SDK into your JS/TS project:

{% tabs %} {% tab title="npm" %}

npm install @airstack/airstack-react

{% endtab %}

{% tab title="yarn" %}

yarn add @airstack/airstack-react

{% endtab %}

{% tab title="pnpm" %}

pnpm install @airstack/airstack-react

{% endtab %} {% endtabs %}

Step 2: Set Environment Variable

Create a new .env file:

touch .env

Add the Airstack API key as the environment variable:

AIRSTACK_API_KEY=YOUR_AIRSTACK_API_KEY

{% hint style="info" %} Depending on the JavaScript framework that you are using, you might need to specify a specific naming convention for your environment variables, e.g. vue needs VUE_APP_AIRSTACK_API_KEY {% endhint %}

Step 3: Initialize SDK

You can use init from the SDK to initialize it with the Airstack API key:

{% tabs %} {% tab title="TypeScript" %} {% code title="index.ts" %}

import { init } from "@airstack/airstack-react";

init(process.env.AIRSTACK_API_KEY);

{% endcode %} {% endtab %}

{% tab title="JavaScript" %} {% code title="index.js" %}

import { init } from "@airstack/airstack-react";

init(process.env.AIRSTACK_API_KEY);

{% endcode %} {% endtab %} {% endtabs %}

Step 4: Call Your Query

Once you have initialized the SDK, you can use the fetchQuery to call the Airstack API.

Below you have been provided with Airstack query to fetch the 0x address, Lens, and Farcaster owned by vitalik.eth:

{% hint style="info" %} For more query examples, check out Guides for various use cases you can build with Airstack. {% endhint %}

{% tabs %} {% tab title="TypeScript" %} {% code title="index.ts" %}

import { fetchQuery } from "@airstack/airstack-react";

interface QueryResponse {
  data: Data;
  error: Error;
}

interface Data {
  Wallet: Wallet;
}

interface Error {
  message: string;
}

interface Wallet {
  socials: Social[];
  addresses: string[];
}

interface Social {
  dappName: "lens" | "farcaster";
  profileName: string;
}

const query = `
query MyQuery {
  Wallet(input: {identity: "vitalik.eth", blockchain: ethereum}) {
    socials {
      dappName
      profileName
    }
    addresses
  }
}
`;

const main = async () => {
  const { data, error }: QueryResponse = await fetchQuery(query);

  if (error) {
    throw new Error(error.message);
  }

  console.log(data);
};

main();

{% endcode %} {% endtab %}

{% tab title="JavaScript" %} {% code title="index.js" %}

import { fetchQuery } from "@airstack/airstack-react";

const query = `
query MyQuery {
  Wallet(input: {identity: "vitalik.eth", blockchain: ethereum}) {
    socials {
      dappName
      profileName
    }
    addresses
  }
}
`;

const main = async () => {
  const { data, error } = await fetchQuery(query);

  if (error) {
    throw new Error(error.message);
  }

  console.log(data);
};

main();

{% endcode %} {% endtab %} {% endtabs %}

The data variable will return and logged into your terminal as follows:

{
  "data": {
    "Wallet": {
      "socials": [
        {
          "dappName": "farcaster",
          "profileName": "vitalik.eth"
        },
        {
          "dappName": "lens",
          "profileName": "lens/@vitalik"
        }
      ],
      "addresses": ["0xd8da6bf26964af9d7eed9e03e53415d37aa96045"]
    }
  }
}

Developer Support

If you have any questions or need help regarding integrating Airstack into your frontend TS/JS application, please join our Airstack's Telegram group.

More Resources

Learn to build more with Airstack using our tutorials: