⚛️ React bindings for helping build decentralized applications quickly on Ethereum and IPFS using GraphQL.
MIT License
Build decentralized applications quickly and cheaply on Ethereum and IPFS using GraphQL.
Compatible with both React and React Native!
Using yarn:
yarn add thegraph-react
You'll also need to manually supply install the following dependencies:
@apollo/client
graphql
nanoid
import { gql } from "@apollo/client";
import React from "react";
import { StyleSheet, Text, View } from "react-native";
import { Chains, Subgraph, Subgraphs, TheGraphProvider, useCreateSubgraph, useSubgraph } from "thegraph-react";
const styles = StyleSheet.create({
center: { alignItems: "center", justifyContent: "center" },
});
function Aave({ aave }: {
readonly aave: Subgraph,
}): JSX.Element {
const { useQuery } = useSubgraph(aave);
const { error, loading, data } = useQuery(gql`
{
lendingPoolConfigurationHistoryItems(first: 5) {
id
provider {
id
}
lendingPool
lendingPoolCore
}
lendingPoolConfigurations(first: 5) {
id
lendingPool
lendingPoolCore
lendingPoolParametersProvider
}
}
`);
return (
<View style={[StyleSheet.absoluteFill, styles.center]}>
<Text>{(error || loading) ? 'Loading...' : JSON.stringify(data)}</Text>
</View>
);
}
export default function App(): JSX.Element {
const aave = useCreateSubgraph({
[Chains.MAINNET]: 'https://api.thegraph.com/subgraphs/name/aave/protocol',
});
const subgraphs = React.useMemo((): Subgraphs => {
return [aave];
}, [aave]);
return (
<TheGraphProvider chain={Chains.MAINNET} subgraphs={subgraphs}>
<Aave aave={aave} />
</TheGraphProvider>
);
}