To easily query our subgraph from our frontend application, we will use the Apollo GraphQL client.
In the root directory of our frontend app, we can add a file called apollo-client.js
and add the code below with your deployed subgraph url:
import { ApolloClient, InMemoryCache } from "@apollo/client"; const client = new ApolloClient({ uri: "https://api.thegraph.com/subgraphs/name/[YOUR_GITHUB]/[YOUR_SUBGRAPH]", cache: new InMemoryCache(), }); export default client;
In our _app.js
file, we can import the apollo provider and client at the top of the file, and wrap our Layout
component inside the Apollo Provider.
import { ApolloProvider } from "@apollo/client"; import client from "../apollo-client";
<ApolloProvider client={client}> <Layout> <Component {...pageProps} /> </Layout> </ApolloProvider>
If you run into any errors while wrapping the Layout component with the ApolloProvider, here's the full MyApp
function for reference:
export default function MyApp({ Component, pageProps }) { return ( <WagmiConfig client={wagmiClient}> <RainbowKitProvider chains={chains}> <ApolloProvider client={client}> <Layout> <Component {...pageProps} /> </Layout> </ApolloProvider> </RainbowKitProvider> </WagmiConfig> ); }
Now we can easily access the apollo client in each of our pages where we want to query our subgraph!
If you need help, check to see if your question has already been asked in #section-7-help. If you don't see it in there, post a question with any details that would make it easy for a team member to help you. We'll answer most frequently asked questions in live office hours, so keep an eye out in #announcements for those!
Writers: Sarah Schwartz, Editors: Sarah Z