Could not find "client"...Wrap the root component in an <ApolloProvider>, or pass an ApolloClient instance in via options

Evelynn Jones 0
Viewed 28

I am completely new to coding but jumping into blockchain development feet first. The issue I'm having was addressed here. I tried everything mentioned, including reading through this page - getting started with Apollo Client.

However, I'm getting the same error: Invariant Violation: Could not find "client" in the context or passed in as an option. Wrap the root component in an , or pass an ApolloClient instance in via options.

Screenshot noting the problem in my code

Here's my index.js code from the top to where the error is:

import { useState } from "react";
import { ApolloClient, InMemoryCache, ApolloProvider, gql, useQuery } from "@apollo/client";
import EventCard from "../components/EventCard";
import Landing from "../components/Landing";
import client from "../apollo-client";


const UPCOMING_EVENTS = gql`
  query Events($currentTimestamp: String) {
    events(where: { eventTimestamp_gt: $currentTimestamp }) {
      id
      name
      eventTimestamp
      imageURL
    }
  }
`;


export default function Home() {
  const [currentTimestamp, setEventTimestamp] = useState(
    new Date().getTime().toString()
  );

  const { loading, error, data } = useQuery(UPCOMING_EVENTS, {
    variables: { currentTimestamp },
  });

Solution 1: Go back to Step 4

That didn't work. Here's proof:

Module not found - react.dom/client

Module not found - /.App

React DOM not defined

apollo-client reactjs javascript
1 Answers

After checking my _apps.js file, I realized I entered my components twice.

Before:

export default function MyApp({ Component, pageProps }) {
  return (
    <WagmiConfig client={wagmiClient}>
      <RainbowKitProvider chains={chains}>
        <ApolloProvider client={client}>
          <Layout>
            <Component {...pageProps} />
          </Layout>
        </ApolloProvider>
        <Layout>
          <Component {...pageProps} />
        </Layout>
      </RainbowKitProvider>
    </WagmiConfig>
  );
}

After:

export default function MyApp({ Component, pageProps }) {
  return (
    <WagmiConfig client={wagmiClient}>
      <RainbowKitProvider chains={chains}>
        <ApolloProvider client={client}>
          <Layout>
            <Component {...pageProps} />
          </Layout>
        </ApolloProvider>
      </RainbowKitProvider>
    </WagmiConfig>
  );
}

Evelynn Jones0
Related