1

Error message:

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.

Does anyone know how to solve this issue?

useQuery(LINK_QUERY) is returning the error above. I've tried using switching useQuery to <Query> ... </Query>, and it didn't solve the issue. I've also tried refactoring the index.js file and using ApolloHooksProvider mentioned here. The solution mentioned here has not solved the issue either.

Code block:

import { useQuery } from "@apollo/client";
import LINK_QUERY from "../graphql/queries/GetAllLinks";

function MakeSlug(length) {
  let slug = "";
  let characters =
    "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
  let charactersLength = characters.length;
  for (let i = 0; i < length; i++) {
    slug += characters.charAt(Math.floor(Math.random() * charactersLength));
  }
  return CheckSlug(slug);
}

function CheckSlug(slug) {
  const { loading, error, data } = useQuery(LINK_QUERY);

  if (loading) return "Loading";
  if (error) return `Error! ${error.message}`;

  return data.allLinks.map((link) => {
    if (link.slug === slug) {
      return MakeSlug(4);
    } else {
      return slug;
    }
  });
}

module.exports = MakeSlug;

Full code: https://codesandbox.io/s/gifted-liskov-tkhtm?file=/src/services/MakeSlug.js

Thank you!

peyo
  • 351
  • 4
  • 15

1 Answers1

0

I refactored the code base and changed all apollo-boost and react-apollo dependencies to @apollo/client.

This required a little refactoring. It wasn't that wild of a change.

<Query> changed to useQuery. And <Mutation> changed to useMutation. Personally, I prefer the <Query> and <Mutation> ways of writing the codebase but it appears to be a more consistent way to write the code to use one dependency than more than one.

peyo
  • 351
  • 4
  • 15