thegraph-react

!https://camo.githubusercontent.com/0f9fcc0ac1b8617ad4989364f60f78b2d6b32985ad6a508f215f14d8f897b8d3/68747470733a2f2f62616467656e2e6e65742f62616467652f547970655363726970742f7374726963742532302546302539462539322541412f626c7565

⚛️ Helping build decentralized applications quickly on Ethereum and IPFS using GraphQL.

Compatible with both React and React Native (Android/iOS/Web).

🚀 Getting Started

Using yarn:

``
yarn add thegraph-react
`

✍️ Usage

`javascript
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 (

{(error || loading) ? 'Loading...' : JSON.stringify(data)}

);
}

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 (



);
}
``

✌️ License