Could not find "client" in the context or passed in as an option

Users Dgraph Cloud
1

Hi
I am learning to use Slash GraphQL, And I try to build a React UI based on this document (GraphQL Queries in Apollo React - Courses)
I load the Schema and Data into Slash GraphQL, down the app boilerplate , run the GraphQL Code Generator.
So far everything is going well, But when I try to follow the tutorial to run the code (yarn start), I get an error

Could not find "client" in the context or passed in as an option. Wrap the root component in an <ApolloProvider>, or pass an ApolloClient instance in via options.
new InvariantError
src/invariant.ts:12
   9 | export class InvariantError extends Error {
  10 |   framesToPop = 1;
  11 |   name = genericMessage;
> 12 |   constructor(message: string | number = genericMessage) {
  13 |     super(
  14 |       typeof message === "number"
  15 |         ? `${genericMessage}: ${message} (see https://github.com/apollographql/invariant-packages)`
View compiled
invariant
src/invariant.ts:27
  24 |   message?: string | number,
  25 | ): asserts condition {
  26 |   if (!condition) {
> 27 |     throw new InvariantError(message);
  28 |   }
  29 | }
  30 | 
View compiled

index.tsx

import React from "react"
import ReactDOM from "react-dom"
import { App } from "./App";
import {ApolloClient, createHttpLink, InMemoryCache, ApolloProvider} from '@apollo/client'
import * as serviceWorker from "./serviceWorker"
import "semantic-ui-css/semantic.min.css"
import "./index.css"
import "./styles/main.css"

ReactDOM.render(
  <App />, 
  document.getElementById("root")
)

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
const createApolloClient = () => {
  const httpLink = createHttpLink({
    uri: "https://maddening-hat.us-west-2.aws.cloud.dgraph.io/graphql",
  })
  console.log(httpLink);
  return new ApolloClient({
    link: httpLink,
    cache: new InMemoryCache(),
  })
}

ReactDOM.render(
  <ApolloProvider client={createApolloClient()}>
    <React.StrictMode>
      <App />
    </React.StrictMode>
  </ApolloProvider>,
  document.getElementById("root")
)

serviceWorker.unregister()

slash-graphql backends

slash-graphql list-backends
Id     Name        Endpoint                                                    
0x716d My Todo App https://plant-store.us-west-2.aws.cloud.dgraph.io/graphql   
0x722d Test    https://maddening-hat.us-west-2.aws.cloud.dgraph.io/graphql

Please help me to solve this problem, thanks

2

Did you manage to solve this?

3

I am not a react guy nor apollo (If you still have problems you might want to look into urql which is must faster), but your code looks a little different than the dgraph template.

J

4

Hi, Please I’d like to know if you were able to solve this. I’m faceing the same issue and can’t find a solution.