Skip to content

Latest commit

 

History

History
304 lines (242 loc) · 6.71 KB

react.md

File metadata and controls

304 lines (242 loc) · 6.71 KB
description layout
Learn how to integrate Airstack APIs to your React-based application, including both React Web and React Native, using the Airstack Web SDK.
title description tableOfContents outline pagination
visible
true
visible
true
visible
true
visible
visible
true

⚛️ React

In this tutorial, you will learn how to start integrating Airstack API into your React application.

{% hint style="info" %} This tutorial will only covering React app build with vite and create-react-app.

If you are looking to integrate Airstack with Next.js, click here. {% endhint %}

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 React 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:

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

VITE_AIRSTACK_API_KEY=YOUR_AIRSTACK_API_KEY

{% endtab %}

{% tab title="create-react-app" %}

REACT_APP_AIRSTACK_API_KEY=YOUR_AIRSTACK_API_KEY

{% endtab %} {% endtabs %}

Step 3: Initialize SDK

Add init function from the SDK to initialize it with the Airstack API key:

{% tabs %} {% tab title="vite (TS)" %} {% code title="main.tsx" %}

import React from "react";
import ReactDOM from "react-dom/client";
import { init } from "@airstack/airstack-react";
import Component from "./Component";

init(import.meta.env.VITE_AIRSTACK_API_KEY);

ReactDOM.createRoot(document.getElementById("root")).render(
  <React.StrictMode>
    <Component />
  </React.StrictMode>
);

{% endcode %} {% endtab %}

{% tab title="vite (JS)" %} {% code title="main.jsx" %}

import React from "react";
import ReactDOM from "react-dom/client";
import { init } from "@airstack/airstack-react";
import Component from "./Component";

init(import.meta.env.VITE_AIRSTACK_API_KEY);

ReactDOM.createRoot(document.getElementById("root")).render(
  <React.StrictMode>
    <Component />
  </React.StrictMode>
);

{% endcode %} {% endtab %}

{% tab title="create-react-app (TS)" %} {% code title="index.tsx" %}

import React from "react";
import ReactDOM from "react-dom/client";
import { init } from "@airstack/airstack-react";
import Component from "./Component";

init(process.env.REACT_APP_AIRSTACK_API_KEY);

ReactDOM.createRoot(document.getElementById("root")).render(
  <React.StrictMode>
    <Component />
  </React.StrictMode>
);

{% endcode %} {% endtab %}

{% tab title="create-react-app (JS)" %} {% code title="index.jsx" %}

import React from "react";
import ReactDOM from "react-dom/client";
import { init } from "@airstack/airstack-react";
import Component from "./Component";

init(process.env.REACT_APP_AIRSTACK_API_KEY);

ReactDOM.createRoot(document.getElementById("root")).render(
  <React.StrictMode>
    <Component />
  </React.StrictMode>
);

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

Step 4: Call Your Query

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

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

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

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

interface QueryResponse {
  data: Data | null;
  loading: boolean;
  error: Error | null;
}

interface Data {
  Wallet: Wallet;
}

interface Error {
  message: string;
}

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

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


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

const Component = () => {
  const { data, loading, error }: QueryResponse = useQuery<Data>(query, {}, { cache: false });

  if (loading) {
    return <p>Loading...</p>;
  }

  if (error) {
    return <p>Error: {error.message}</p>;
  }

  // Render your component using the data returned by the query
  console.log(data);
}

export default Component;

{% endtab %}

{% tab title="JavaScript" %} {% code title="Component.jsx" %}

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

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

const Component = () => {
  const { data, loading, error } = useQuery(query, {}, { cache: false });

  if (loading) {
    return <p>Loading...</p>;
  }

  if (error) {
    return <p>Error: {error.message}</p>;
  }

  // Render your component using the data returned by the query
  console.log(data);
};

export default Component;

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

The data variable will return and logged into your browser's console as follows:

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

Developer Support

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

More Resources

Learn to build more with Airstack using our tutorials: