âī¸React
Learn how to integrate Airstack APIs to your React-based application, including both React Web and React Native, using the Airstack Web SDK.
In this tutorial, you will learn how to start integrating Airstack API into your React application.
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.
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:
npm install @airstack/airstack-react
yarn add @airstack/airstack-react
pnpm install @airstack/airstack-react
Step 2: Set Environment Variable
Create a new .env
file:
Add the Airstack API key as the environment variable:
VITE_AIRSTACK_API_KEY=YOUR_AIRSTACK_API_KEY
REACT_APP_AIRSTACK_API_KEY=YOUR_AIRSTACK_API_KEY
Step 3: Initialize SDK
Add init
function from the SDK to initialize it with the Airstack API key:
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>
);
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>
);
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>
);
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>
);
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, Lens, and Farcaster owned by vitalik.eth
:
For more query examples, check out Guides for various use cases you can build with Airstack.
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;
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;
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:
Last updated