GraphQL Client with ApolloBoost issues

GraphQL Client with ApolloBoost issues


0

I’m trying to run a React App using ApolloClient in node.js, and I receive the following error from Chrome Inspect:

invariant.ts:12 Uncaught Invariant Violation: An error occurred! For more details, see the full error text at https://go.apollo.dev/c/err#%7B%22version%22%3A%223.8.2%22%2C%22message%22%3A47%2C%22args%22%3A%5B%5D%7D
    at new InvariantError (https://localhost:60422/static/js/0.chunk.js:76352:24)
    at invariant (https://localhost:60422/static/js/0.chunk.js:76363:11)
    at invariant (https://localhost:60422/static/js/0.chunk.js:9980:67)
    at useApolloClient (https://localhost:60422/static/js/0.chunk.js:7980:80)
    at useQuery (https://localhost:60422/static/js/0.chunk.js:8412:103)
    at App (https://localhost:60422/static/js/main.chunk.js:142:75)
    at renderWithHooks (https://localhost:60422/static/js/0.chunk.js:58945:22)
    at mountIndeterminateComponent (https://localhost:60422/static/js/0.chunk.js:62231:17)
    at beginWork (https://localhost:60422/static/js/0.chunk.js:63527:20)
    at HTMLUnknownElement.callCallback (https://localhost:60422/static/js/0.chunk.js:48537:18)
    at Object.invokeGuardedCallbackDev (https://localhost:60422/static/js/0.chunk.js:48581:20)
    at invokeGuardedCallback (https://localhost:60422/static/js/0.chunk.js:48638:35)
    at beginWork$1 (https://localhost:60422/static/js/0.chunk.js:68512:11)
    at performUnitOfWork (https://localhost:60422/static/js/0.chunk.js:67762:16)
    at workLoopSync (https://localhost:60422/static/js/0.chunk.js:67682:9)
    at renderRootSync (https://localhost:60422/static/js/0.chunk.js:67655:11)
    at performConcurrentWorkOnRoot (https://localhost:60422/static/js/0.chunk.js:67049:78)
    at workLoop (https://localhost:60422/static/js/0.chunk.js:75044:38)
    at flushWork (https://localhost:60422/static/js/0.chunk.js:75022:18)
    at performWorkUntilDeadline (https://localhost:60422/static/js/0.chunk.js:75259:25)
    at run (https://localhost:60422/static/js/0.chunk.js:75413:9)
    at runIfPresent (https://localhost:60422/static/js/0.chunk.js:75441:11)
    at onGlobalMessage (https://localhost:60422/static/js/0.chunk.js:75478:9)
InvariantError @ invariant.ts:12
invariant @ invariant.ts:27
invariant @ invariantWrappers.ts:66
useApolloClient @ useApolloClient.ts:11
useQuery @ useQuery.ts:54
App @ App.js:35
renderWithHooks @ react-dom.development.js:16305
mountIndeterminateComponent @ react-dom.development.js:20074
beginWork @ react-dom.development.js:21587
callCallback @ react-dom.development.js:4164
invokeGuardedCallbackDev @ react-dom.development.js:4213
invokeGuardedCallback @ react-dom.development.js:4277
beginWork$1 @ react-dom.development.js:27451
performUnitOfWork @ react-dom.development.js:26560
workLoopSync @ react-dom.development.js:26466
renderRootSync @ react-dom.development.js:26434
performConcurrentWorkOnRoot @ react-dom.development.js:25738
workLoop @ scheduler.development.js:266
flushWork @ scheduler.development.js:239
performWorkUntilDeadline @ scheduler.development.js:533
run @ setImmediate.js:40
runIfPresent @ setImmediate.js:69
onGlobalMessage @ setImmediate.js:109
postMessage (async)
registerImmediate @ setImmediate.js:120
setImmediate @ setImmediate.js:27
schedulePerformWorkUntilDeadline @ scheduler.development.js:564
requestHostCallback @ scheduler.development.js:588
unstable_scheduleCallback @ scheduler.development.js:441
scheduleCallback$1 @ react-dom.development.js:27537
ensureRootIsScheduled @ react-dom.development.js:25683
scheduleUpdateOnFiber @ react-dom.development.js:25531
updateContainer @ react-dom.development.js:28858
push../node_modules/react-dom/cjs/react-dom.development.js.ReactDOMHydrationRoot.render.ReactDOMRoot.render @ react-dom.development.js:29314
./src/index.js @ index.js:8
__webpack_require__ @ bootstrap:789
fn @ bootstrap:150
1 @ reportWebVitals.js:13
__webpack_require__ @ bootstrap:789
checkDeferredModules @ bootstrap:45
webpackJsonpCallback @ bootstrap:32
(anonymous) @ main.chunk.js:1
invariant.ts:12 Uncaught Invariant Violation: An error occurred! For more details, see the full error text at https://go.apollo.dev/c/err#%7B%22version%22%3A%223.8.2%22%2C%22message%22%3A47%2C%22args%22%3A%5B%5D%7D
    at new InvariantError (https://localhost:60422/static/js/0.chunk.js:76352:24)
    at invariant (https://localhost:60422/static/js/0.chunk.js:76363:11)
    at invariant (https://localhost:60422/static/js/0.chunk.js:9980:67)
    at useApolloClient (https://localhost:60422/static/js/0.chunk.js:7980:80)
    at useQuery (https://localhost:60422/static/js/0.chunk.js:8412:103)
    at App (https://localhost:60422/static/js/main.chunk.js:142:75)
    at renderWithHooks (https://localhost:60422/static/js/0.chunk.js:58945:22)
    at mountIndeterminateComponent (https://localhost:60422/static/js/0.chunk.js:62231:17)
    at beginWork (https://localhost:60422/static/js/0.chunk.js:63527:20)
    at HTMLUnknownElement.callCallback (https://localhost:60422/static/js/0.chunk.js:48537:18)
    at Object.invokeGuardedCallbackDev (https://localhost:60422/static/js/0.chunk.js:48581:20)
    at invokeGuardedCallback (https://localhost:60422/static/js/0.chunk.js:48638:35)
    at beginWork$1 (https://localhost:60422/static/js/0.chunk.js:68512:11)
    at performUnitOfWork (https://localhost:60422/static/js/0.chunk.js:67762:16)
    at workLoopSync (https://localhost:60422/static/js/0.chunk.js:67682:9)
    at renderRootSync (https://localhost:60422/static/js/0.chunk.js:67655:11)
    at recoverFromConcurrentError (https://localhost:60422/static/js/0.chunk.js:67147:24)
    at performConcurrentWorkOnRoot (https://localhost:60422/static/js/0.chunk.js:67059:26)
    at workLoop (https://localhost:60422/static/js/0.chunk.js:75044:38)
    at flushWork (https://localhost:60422/static/js/0.chunk.js:75022:18)
    at performWorkUntilDeadline (https://localhost:60422/static/js/0.chunk.js:75259:25)
    at run (https://localhost:60422/static/js/0.chunk.js:75413:9)
    at runIfPresent (https://localhost:60422/static/js/0.chunk.js:75441:11)
    at onGlobalMessage (https://localhost:60422/static/js/0.chunk.js:75478:9)
InvariantError @ invariant.ts:12
invariant @ invariant.ts:27
invariant @ invariantWrappers.ts:66
useApolloClient @ useApolloClient.ts:11
useQuery @ useQuery.ts:54
App @ App.js:35
renderWithHooks @ react-dom.development.js:16305
mountIndeterminateComponent @ react-dom.development.js:20074
beginWork @ react-dom.development.js:21587
callCallback @ react-dom.development.js:4164
invokeGuardedCallbackDev @ react-dom.development.js:4213
invokeGuardedCallback @ react-dom.development.js:4277
beginWork$1 @ react-dom.development.js:27451
performUnitOfWork @ react-dom.development.js:26560
workLoopSync @ react-dom.development.js:26466
renderRootSync @ react-dom.development.js:26434
recoverFromConcurrentError @ react-dom.development.js:25850
performConcurrentWorkOnRoot @ react-dom.development.js:25750
workLoop @ scheduler.development.js:266
flushWork @ scheduler.development.js:239
performWorkUntilDeadline @ scheduler.development.js:533
run @ setImmediate.js:40
runIfPresent @ setImmediate.js:69
onGlobalMessage @ setImmediate.js:109
postMessage (async)
registerImmediate @ setImmediate.js:120
setImmediate @ setImmediate.js:27
schedulePerformWorkUntilDeadline @ scheduler.development.js:564
requestHostCallback @ scheduler.development.js:588
unstable_scheduleCallback @ scheduler.development.js:441
scheduleCallback$1 @ react-dom.development.js:27537
ensureRootIsScheduled @ react-dom.development.js:25683
scheduleUpdateOnFiber @ react-dom.development.js:25531
updateContainer @ react-dom.development.js:28858
push../node_modules/react-dom/cjs/react-dom.development.js.ReactDOMHydrationRoot.render.ReactDOMRoot.render @ react-dom.development.js:29314
./src/index.js @ index.js:8
__webpack_require__ @ bootstrap:789
fn @ bootstrap:150
1 @ reportWebVitals.js:13
__webpack_require__ @ bootstrap:789
checkDeferredModules @ bootstrap:45
webpackJsonpCallback @ bootstrap:32
(anonymous) @ main.chunk.js:1
index.js:1 The above error occurred in the <App> component:

    at App (https://localhost:60422/static/js/main.chunk.js:136:81)

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.
console.<computed> @ index.js:1
logCapturedError @ react-dom.development.js:18687
update.callback @ react-dom.development.js:18720
callCallback @ react-dom.development.js:13923
commitUpdateQueue @ react-dom.development.js:13944
commitLayoutEffectOnFiber @ react-dom.development.js:23391
commitLayoutMountEffects_complete @ react-dom.development.js:24688
commitLayoutEffects_begin @ react-dom.development.js:24674
commitLayoutEffects @ react-dom.development.js:24612
commitRootImpl @ react-dom.development.js:26823
commitRoot @ react-dom.development.js:26682
finishConcurrentRender @ react-dom.development.js:25892
performConcurrentWorkOnRoot @ react-dom.development.js:25809
workLoop @ scheduler.development.js:266
flushWork @ scheduler.development.js:239
performWorkUntilDeadline @ scheduler.development.js:533
run @ setImmediate.js:40
runIfPresent @ setImmediate.js:69
onGlobalMessage @ setImmediate.js:109
postMessage (async)
registerImmediate @ setImmediate.js:120
setImmediate @ setImmediate.js:27
schedulePerformWorkUntilDeadline @ scheduler.development.js:564
requestHostCallback @ scheduler.development.js:588
unstable_scheduleCallback @ scheduler.development.js:441
scheduleCallback$1 @ react-dom.development.js:27537
ensureRootIsScheduled @ react-dom.development.js:25683
scheduleUpdateOnFiber @ react-dom.development.js:25531
updateContainer @ react-dom.development.js:28858
push../node_modules/react-dom/cjs/react-dom.development.js.ReactDOMHydrationRoot.render.ReactDOMRoot.render @ react-dom.development.js:29314
./src/index.js @ index.js:8
__webpack_require__ @ bootstrap:789
fn @ bootstrap:150
1 @ reportWebVitals.js:13
__webpack_require__ @ bootstrap:789
checkDeferredModules @ bootstrap:45
webpackJsonpCallback @ bootstrap:32
(anonymous) @ main.chunk.js:1
invariant.ts:12 Uncaught Invariant Violation: An error occurred! For more details, see the full error text at https://go.apollo.dev/c/err#%7B%22version%22%3A%223.8.2%22%2C%22message%22%3A47%2C%22args%22%3A%5B%5D%7D
    at new InvariantError (https://localhost:60422/static/js/0.chunk.js:76352:24)
    at invariant (https://localhost:60422/static/js/0.chunk.js:76363:11)
    at invariant (https://localhost:60422/static/js/0.chunk.js:9980:67)
    at useApolloClient (https://localhost:60422/static/js/0.chunk.js:7980:80)
    at useQuery (https://localhost:60422/static/js/0.chunk.js:8412:103)
    at App (https://localhost:60422/static/js/main.chunk.js:142:75)
    at renderWithHooks (https://localhost:60422/static/js/0.chunk.js:58945:22)
    at mountIndeterminateComponent (https://localhost:60422/static/js/0.chunk.js:62231:17)
    at beginWork (https://localhost:60422/static/js/0.chunk.js:63527:20)
    at beginWork$1 (https://localhost:60422/static/js/0.chunk.js:68490:18)
    at performUnitOfWork (https://localhost:60422/static/js/0.chunk.js:67762:16)
    at workLoopSync (https://localhost:60422/static/js/0.chunk.js:67682:9)
    at renderRootSync (https://localhost:60422/static/js/0.chunk.js:67655:11)
    at recoverFromConcurrentError (https://localhost:60422/static/js/0.chunk.js:67147:24)
    at performConcurrentWorkOnRoot (https://localhost:60422/static/js/0.chunk.js:67059:26)
    at workLoop (https://localhost:60422/static/js/0.chunk.js:75044:38)
    at flushWork (https://localhost:60422/static/js/0.chunk.js:75022:18)
    at performWorkUntilDeadline (https://localhost:60422/static/js/0.chunk.js:75259:25)
    at run (https://localhost:60422/static/js/0.chunk.js:75413:9)
    at runIfPresent (https://localhost:60422/static/js/0.chunk.js:75441:11)
    at onGlobalMessage (https://localhost:60422/static/js/0.chunk.js:75478:9)
InvariantError @ invariant.ts:12
invariant @ invariant.ts:27
invariant @ invariantWrappers.ts:66
useApolloClient @ useApolloClient.ts:11
useQuery @ useQuery.ts:54
App @ App.js:35
renderWithHooks @ react-dom.development.js:16305
mountIndeterminateComponent @ react-dom.development.js:20074
beginWork @ react-dom.development.js:21587
beginWork$1 @ react-dom.development.js:27426
performUnitOfWork @ react-dom.development.js:26560
workLoopSync @ react-dom.development.js:26466
renderRootSync @ react-dom.development.js:26434
recoverFromConcurrentError @ react-dom.development.js:25850
performConcurrentWorkOnRoot @ react-dom.development.js:25750
workLoop @ scheduler.development.js:266
flushWork @ scheduler.development.js:239
performWorkUntilDeadline @ scheduler.development.js:533
run @ setImmediate.js:40
runIfPresent @ setImmediate.js:69
onGlobalMessage @ setImmediate.js:109
postMessage (async)
registerImmediate @ setImmediate.js:120
setImmediate @ setImmediate.js:27
schedulePerformWorkUntilDeadline @ scheduler.development.js:564
requestHostCallback @ scheduler.development.js:588
unstable_scheduleCallback @ scheduler.development.js:441
scheduleCallback$1 @ react-dom.development.js:27537
ensureRootIsScheduled @ react-dom.development.js:25683
scheduleUpdateOnFiber @ react-dom.development.js:25531
updateContainer @ react-dom.development.js:28858
push../node_modules/react-dom/cjs/react-dom.development.js.ReactDOMHydrationRoot.render.ReactDOMRoot.render @ react-dom.development.js:29314
./src/index.js @ index.js:8
__webpack_require__ @ bootstrap:789
fn @ bootstrap:150
1 @ reportWebVitals.js:13
__webpack_require__ @ bootstrap:789
checkDeferredModules @ bootstrap:45
webpackJsonpCallback @ bootstrap:32
(anonymous) @ main.chunk.js:1
VM72:2 Uncaught ReferenceError: process is not defined
    at 4043 (<anonymous>:2:13168)
    at r (<anonymous>:2:306599)
    at 8048 (<anonymous>:2:9496)
    at r (<anonymous>:2:306599)
    at 8641 (<anonymous>:2:1379)
    at r (<anonymous>:2:306599)
    at <anonymous>:2:315627
    at <anonymous>:2:324225
    at <anonymous>:2:324229
    at e.onload (index.js:1:1)

This is my App.js:

import './App.css';

import React, { useState } from 'react';
import { ApolloClient, gql, InMemoryCache} from 'apollo-boost';
import { ApolloProvider } from '@apollo/react-hooks';
import { useQuery, useMutation } from '@apollo/react-hooks';



const client = new ApolloClient({
  link: 'https://192.168.0.28:4000/graphql',
  cache: new InMemoryCache(),
});

const GET_CATS = gql`
  query GetCats {
    cats {
      id
      name
    }
  }
`;

const CREATE_CAT = gql`
  mutation CreateCat($name: String!) {
    createCat(name: $name) {
      id
      name
    }
  }
`;

function App() {
  const [name, setName] = useState('');
  const { loading, error, data, refetch } = useQuery(GET_CATS);
  const [createCat] = useMutation(CREATE_CAT);

  const handleSubmit = async (e) => {
    e.preventDefault();

    try {
      const { data: catData } = await createCat({ variables: { name } });
      console.log('Cat created:', catData.createCat);

      // Clear the form
      setName('');

      // Refetch data to display the updated list of cats
      refetch();
    } catch (mutationError) {
      console.error('Failed to create cat:', mutationError);
    }
  };

  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error: {error.message}</p>;

  return (
    <ApolloProvider client={client}>
      <div>
        <h1>GraphQL Client</h1>
        <form onSubmit={handleSubmit}>
          <input
            type="text"
            value={name}
            onChange={(e) => setName(e.target.value)}
            placeholder="Enter a cat's name..."
          />
          <button type="submit">Create Cat</button>
        </form>
        <h2>Cats:</h2>
        <ul>
          {data.cats.map((cat) => (
            <li key={cat.id}>{cat.name}</li>
          ))}
        </ul>
      </div>
    </ApolloProvider>
  );
}

export default App;

package.json dependencies:

 "dependencies": {
    "@apollo/react-hooks": "^4.0.0",
    "@testing-library/jest-dom": "^5.17.0",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "apollo-boost": "^0.4.3",
    "graphql": "^15.8.0",
    "graphql-tag": "^2.12.5",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-router-dom": "^6.15.0",
    "react-scripts": "^3.0.1",
    "web-vitals": "^2.1.4"
  },

When I run query/mutation via GraphiQL it works well. Any ideas what happens?

I have tried using different modules and now I am using apollo-boost as in a previous implementation it worked.

Improve this question


Load 1 more related questions


Show fewer related questions

0



Reset to default



Leave a Reply

Your email address will not be published. Required fields are marked *