CODEWITHSUNDEEP
async-awaitgraphqlapollo-clientnext.js
Shaun Chua
Shaun Chua

Reputation: 713

Apollo Client Error, Objects are not valid as a React child (found: [object Promise])

I'm getting a weird error when attempting to do async/await on my graphql query. Not sure what to do here.

import React, { Component } from "react";
import { ApolloConsumer } from 'react-apollo';
import Landing from '../modules/landing/index.js';
import getUser from '../shared/services/get-user';

export default class extends Component {
  checkLoggedIn = async (client) => {
    const response = await getUser(client);
    console.log(response);
  }

  render() {
    return (
      <ApolloConsumer>
        {client => (
          <div>
            {this.checkLoggedIn(client)}
            <Landing />
          </div>
        )}
      </ApolloConsumer>
    )
  }
}

If I remove the async await syntax, the app proceeds to execute my getUser query. However, when I try to do this with async/await. My app shows the error above. Is there something about ApolloConsumer that I do not understand?

Upvotes: 0

Views: 876

Answers (1)

Sam Uherek
Sam Uherek

Reputation: 313

The reason you are getting the error is because async function returns a promise. And, you are trying to render a promise inside of the render method. This isn't Apollo specific error, React simply doesn't allow this.

The reason why it works when you don't have the async there is because the function returns undefined which react treats as null in the render method and doesn't render anything.

Upvotes: 1

Related Questions