Query Local Graph with Scaffold-ETH 2

If you are new to Scaffold-ETH-2 (SE-2), check out my Intro into Scaffold-ETH-2 blog.
Want to learn a little bit more before you get started? Here’s a post about writing, reading, and listening to Smart Contracts using SE-2.
You can also check out Local Graph Dev with Scaffold-ETH 2 to learn more before getting into the specifics of querying this data.

Starting off, note that…

In the code below, you will see that I have cloned the Subgraph-Package branch of SE-2 and added a couple of test events to provide as an example for how easy (and — frankly — cool) it is to query your local subgraph:

event TestEvent(string greeting);
event TestEvent2(address signer);

☝️ New events added to YourContract.sol ☝️

Then, I am simply emitting these (new) events along with the GreetingChange event on the setGreeting(string memory _newGreeting) function:

  emit GreetingChange(msg.sender, _newGreeting, msg.value > 0, 0);
  
  emit TestEvent(_newGreeting); // added this one
  emit TestEvent2(msg.sender); //  ...and this one

So, when I “Set a Greeting_” my new test events will fire off…

on localhost: http://localhost:3000/example-ui to set a greeting…

If you do not already have your local graph node running with a subgraph deployed, then you can go to my other post for all of those details.

Querying from your subgraph endpoint

When your subgraph is deployed, you should be supplied with a link to view your local queries … something like: http://localhost:8000/subgraphs/name/scaffold-eth/your-contract

Here comes something truly magical.

You have something just like Subgraph Studio’s Playground running on your localhost environment. Check it out 👇

Local GraphiQL

With the Explorer (on the left-side) opened, you can alter your queries with the click of the mouse 👇

Make selections within the Explorer, and then click play up-top to run the query

Querying from within your application

We’ll be using Apollo Client — which is used to fetch, cache, and modify both local and remote data with GraphQL. We are going to use it to query data from our subgraph.

If you are looking at the Subgraph-Package branch (or crowd-fund-v3), you will see that there are already some imports from apollo/client in pages\_app.tsx:

import { ApolloClient, ApolloProvider, InMemoryCache } from "@apollo/client";

Then, you configure the subgraph URI:

  const subgraphUri = "http://localhost:8000/subgraphs/name/scaffold-eth/your-contract";

And, configure the client (using the new URI ☝️)….

const apolloClient = new ApolloClient({
    uri: subgraphUri,
    cache: new InMemoryCache(),
  });

You can learn more about configuring Apollo Client here.

Then, you wrap an <ApolloProvider /> (using the new apolloClient const from above) around everything ( still in pages\_app.tsx by the way ) 👇

  return (
    <ApolloProvider client={apolloClient}>
      <WagmiConfig config={wagmiConfig}>
        <NextNProgress />
        <RainbowKitProvider
          chains={appChains.chains}
          avatar={BlockieAvatar}
          theme={isDarkTheme ? darkTheme() : lightTheme()}
        >
          <div className="flex flex-col min-h-screen">
            <Header />
            <main className="relative flex flex-col flex-1">
              <Component {...pageProps} />
            </main>
            <Footer />
          </div>
          <Toaster />
        </RainbowKitProvider>
      </WagmiConfig>
    </ApolloProvider>
  );

Then, you are good to go!

From a component, simply import gql and useQuery from apollo/client

import { gql, useQuery } from "@apollo/client";

Which will allow for a polling query like this:

  const GREETINGS_GRAPHQL = `
  {
    greetings(first: 25, orderBy: createdAt, orderDirection: desc) {
      id
      greeting
      premium
      value
      createdAt
      sender {
        address
        greetingCount
      }
    }
  }
  `;

  const GREETINGS_GQL = gql(GREETINGS_GRAPHQL);
  const greetingsData = useQuery(GREETINGS_GQL, { pollInterval: 1000 });

Want to learn more about querying this data?

Check out my other blog posts on the subject:

• Local Graph Dev with Scaffold-ETH 2
• Live Deploy of a Subgraph