Querying your subgraph

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!

✋ Need Help?

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