# New to Apollo, doing something wrong

**URL:** <https://community.apollographql.com/t/new-to-apollo-doing-something-wrong/7217>\
**Category:** Client SDKs\
**Tags:** client\
**Created:** [February 15, 2024, 9:13pm UTC](https://community.apollographql.com/t/new-to-apollo-doing-something-wrong/7217 "2024-02-15T21:13:46Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![cbwilliamsme](https://sea1.discourse-cdn.com/flex019/user_avatar/community.apollographql.com/cbwilliamsme/32/4912_2.png) [@cbwilliamsme](https://community.apollographql.com/u/cbwilliamsme)\
**Post date:** [February 15, 2024, 9:13pm UTC](https://community.apollographql.com/t/new-to-apollo-doing-something-wrong/7217/1 "2024-02-15T21:13:47Z")

</div>

I’m new to Apollo and trying to build a UI with React, using Keycloak for user login. I have defined the following React component:

```auto
const UserComponent = ({ embeddedKeycloak }) => {
  const email = embeddedKeycloak.idTokenParsed.email || embeddedKeycloak.idTokenParsed.preferred_username;
  console.log(email);
  const { loading, error, data } = useQuery(GET_USER, { variables: { email: email } });

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

  console.log(data);
  return data.account[0];
};

UserComponent.propTypes = {
  embeddedKeycloak: PropTypes.shape({
    idTokenParsed: PropTypes.shape({
      email: PropTypes.string,
      preferred_username: PropTypes.string
    }).isRequired
  }).isRequired
};

```

When I run the code, I get

```auto
Uncaught Invariant Violation: An error occurred!

```

with a long stack trace that includes the line with `useQuery` in it. Note that I do get the user’s email address printed to the console so I know Keycloak is working correctly. Here is the `GET_USER` query:

```auto
const GET_USER = gql`
  query getUser($email: String) {
    account(where: {email: $email}) {
      company {
        name
      }
      company_id
      date_created
      email
      first_name
      id
      is_admin
      last_name
    }
  }
`;

```

Any help is appriciated as I’ve been banging my head on this for a while.

---

<div class="post-metadata">

**Author:** ![jerelmiller](https://sea1.discourse-cdn.com/flex019/user_avatar/community.apollographql.com/jerelmiller/32/3314_2.png) [@jerelmiller](https://community.apollographql.com/u/jerelmiller)\
**Post date:** [February 15, 2024, 10:04pm UTC](https://community.apollographql.com/t/new-to-apollo-doing-something-wrong/7217/2 "2024-02-15T22:04:36Z")

</div>

Hey @cbwilliamsme 👋

Its difficult to tell what’s happening without more info on the error you’re seeing. Does that invariant violation have a URL thats attached that starts with `https://go.apollo.dev/c/err`? If so, please open that URL as it will give you more error details on what is happening.

---

<div class="post-metadata">

**Author:** ![cbwilliamsme](https://sea1.discourse-cdn.com/flex019/user_avatar/community.apollographql.com/cbwilliamsme/32/4912_2.png) [@cbwilliamsme](https://community.apollographql.com/u/cbwilliamsme)\
**Post date:** [February 15, 2024, 10:59pm UTC](https://community.apollographql.com/t/new-to-apollo-doing-something-wrong/7217/3 "2024-02-15T22:59:34Z")

</div>

It does, but reading the page didn’t help.

---

<div class="post-metadata">

**Author:** ![jerelmiller](https://sea1.discourse-cdn.com/flex019/user_avatar/community.apollographql.com/jerelmiller/32/3314_2.png) [@jerelmiller](https://community.apollographql.com/u/jerelmiller)\
**Post date:** [February 16, 2024, 6:02am UTC](https://community.apollographql.com/t/new-to-apollo-doing-something-wrong/7217/4 "2024-02-16T06:02:32Z")

</div>

Would you mind either posting the link or the error text here? Perhaps I can help decipher it.

---

<div class="post-metadata">

**Author:** ![cbwilliamsme](https://sea1.discourse-cdn.com/flex019/user_avatar/community.apollographql.com/cbwilliamsme/32/4912_2.png) [@cbwilliamsme](https://community.apollographql.com/u/cbwilliamsme)\
**Post date:** [February 16, 2024, 1:34pm UTC](https://community.apollographql.com/t/new-to-apollo-doing-something-wrong/7217/5 "2024-02-16T13:34:46Z")

</div>

Here’s the link: [Error code details - Apollo GraphQL Docs](https://www.apollographql.com/docs/react/errors/#%7B%22version%22%3A%223.9.4%22%2C%22message%22%3A49%2C%22args%22%3A%5B%5D%7D)

---

<div class="post-metadata">

**Author:** ![cbwilliamsme](https://sea1.discourse-cdn.com/flex019/user_avatar/community.apollographql.com/cbwilliamsme/32/4912_2.png) [@cbwilliamsme](https://community.apollographql.com/u/cbwilliamsme)\
**Post date:** [February 16, 2024, 1:37pm UTC](https://community.apollographql.com/t/new-to-apollo-doing-something-wrong/7217/6 "2024-02-16T13:37:49Z")

</div>

And here’s the full code. I’m trying to use Keycloak for Authorization (that part is working as I get my email address printed in the console). It’s the code after the email is logged that’s causing the error and I can’t figure out why.

```auto
/* eslint-disable no-unused-vars */
/* eslint-disable react-refresh/only-export-components */
import { ApolloClient, ApolloProvider, InMemoryCache, createHttpLink, useQuery, gql } from '@apollo/client';
import { setContext } from '@apollo/client/link/context';
import React, { useState, useEffect } from 'react';
import * as ReactDOM from 'react-dom/client';
import App from './App';
import keycloak from './Keycloak';
import PropTypes from 'prop-types';

const httpLink = createHttpLink({
  uri: import.meta.env.VITE_APP_HASURA_URL,
});

const authLink = setContext((_, { headers }) => {
  return {
    headers: {
      ...headers,
      'content-type': 'application/json',
      'company-id': 1,
      'x-hasura-admin-secret': import.meta.env.VITE_HASURA_ADMIN_SECRET
    }
  };
});

const client = new ApolloClient({
  link: authLink.concat(httpLink),
  cache: new InMemoryCache()
});

const GET_USER = gql`
  query getUser($email: String) {
    account(where: {email: $email}) {
      company {
        name
      }
      company_id
      date_created
      email
      first_name
      id
      is_admin
      last_name
    }
  }
`;

const UserComponent = ({ embeddedKeycloak }) => {
  const email = embeddedKeycloak.idTokenParsed.email || embeddedKeycloak.idTokenParsed.preferred_username;
  console.log(email);
  const { loading, error, data } = useQuery(GET_USER, { variables: { email: email } });

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

  console.log(data);
  return data.account[0];
};

UserComponent.propTypes = {
  embeddedKeycloak: PropTypes.shape({
    idTokenParsed: PropTypes.shape({
      email: PropTypes.string,
      preferred_username: PropTypes.string
    }).isRequired
  }).isRequired
};

function Root() {
  const [keycloakReady, setKeycloakReady] = useState(false);
  const [keycloakInstance, setKeycloakInstance] = useState(null);

  useEffect(() => {
    keycloak.init({ onLoad: 'login-required' }).then((authenticated) => {
      if (authenticated) {
        setKeycloakInstance(keycloak);
        setKeycloakReady(true);
      } else {
        console.error("User not authenticated");
      }
    });
  }, []);

  // Render nothing until keycloak is initialized
  if (!keycloakReady) return <div>Loading Keycloak...</div>;

  return (
    <ApolloProvider client={client}>
      <App user={UserComponent({ embeddedKeycloak: keycloakInstance })} keycloak={keycloakInstance} />
    </ApolloProvider>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(<Root />);

```

---

<div class="post-metadata">

**Author:** ![lenz](https://sea1.discourse-cdn.com/flex019/user_avatar/community.apollographql.com/lenz/32/4007_2.png) [@lenz](https://community.apollographql.com/u/lenz)\
**Post date:** [February 16, 2024, 1:42pm UTC](https://community.apollographql.com/t/new-to-apollo-doing-something-wrong/7217/7 "2024-02-16T13:42:05Z")

</div>

Your code `user={UserComponent({ embeddedKeycloak: keycloakInstance })}` is not actually rendering the `UserComponent` function as a component, but executes it as a function - as part of your `Root` component.

Your `Root` component is not wrapped in `ApolloProvider` (only it’s children are), so you get this error message.

You would need to actually render your `UserComponent`, like `<UserComponent embeddedKeycloak={keycloakInstance} />` - passing that as a prop to `App` should be fine:

`user={<UserComponent embeddedKeycloak={keycloakInstance} />}`

---

<div class="post-metadata">

**Author:** ![cbwilliamsme](https://sea1.discourse-cdn.com/flex019/user_avatar/community.apollographql.com/cbwilliamsme/32/4912_2.png) [@cbwilliamsme](https://community.apollographql.com/u/cbwilliamsme)\
**Post date:** [February 16, 2024, 1:56pm UTC](https://community.apollographql.com/t/new-to-apollo-doing-something-wrong/7217/8 "2024-02-16T13:56:27Z")

</div>

I’m confused as I thought this code wrapped the `Root` in an `ApolloProvider`:

```auto
  return (
    <ApolloProvider client={client}>
      <App user={UserComponent({ embeddedKeycloak: keycloakInstance })} keycloak={keycloakInstance} />
    </ApolloProvider>
  );

```

---

<div class="post-metadata">

**Author:** ![lenz](https://sea1.discourse-cdn.com/flex019/user_avatar/community.apollographql.com/lenz/32/4007_2.png) [@lenz](https://community.apollographql.com/u/lenz)\
**Post date:** [February 16, 2024, 1:59pm UTC](https://community.apollographql.com/t/new-to-apollo-doing-something-wrong/7217/9 "2024-02-16T13:59:14Z")

</div>

But it is not called as a component.

You call `UserComponent` **as a function** while `Root` is evaluated.

It’s the difference between `UserComponent(...)` (function call) and `<UserComponent ...` (component render).

So as you use it, `UserComponent` is not a child component. It’s just a method call that happens while `Root` renders.

---

<div class="post-metadata">

**Author:** ![cbwilliamsme](https://sea1.discourse-cdn.com/flex019/user_avatar/community.apollographql.com/cbwilliamsme/32/4912_2.png) [@cbwilliamsme](https://community.apollographql.com/u/cbwilliamsme)\
**Post date:** [February 16, 2024, 2:25pm UTC](https://community.apollographql.com/t/new-to-apollo-doing-something-wrong/7217/10 "2024-02-16T14:25:13Z")

</div>

Ah ha! I see said the blind man when he picked up his hammer and saw!

Problem solved! Thank you! Onto the next!