react.js with apollo to query graphql - Error: Objects are not valid as a React child

Question

I am having issue with react.js with apollo to query graphql endpoint. Here is the code that having issue.

class ChecklistSummaryTime extends Component {
constructor(props) {
    super(props);
    this.state = {
       data: [],
       sitePath: window.location.pathname
    }
 }

 render() {
     return(
        <ApolloProvider client={getGraphqlClient()}>
            <Query query={gql`
                {
                    all_checklist_time (checklist_type: "backup", order_by: "check_year check_month", 
                            sort_order: "desc desc", group_by: "check_month check_year") {
                            quarter,
                            month,
                            year
                    }
                }
            `}>
            {({ loading, error, data }) => {
                if (loading) return "Loading...";
                if (error) return `Error! ${error.message}`;
                console.log(data);
                return data;
            }}
            </Query>
        </ApolloProvider>
     );
 }}

It has error of "Error: Objects are not valid as a React child (found: object with keys {all_checklist_time}). If you meant to render a collection of children, use an array instead."

Please help me out to figure out what is wrong with the gql portion?

Thanks

helloitsjoe helloitsjoe · Accepted Answer · 2019-03-01T03:49:11

The error you're seeing means that return data is returning an object, which is not a valid React child. You should convert that into either an array, text, or a component. If all_checklist_time is an array, just return data.all_checklist_time.

react.js with apollo to query graphql - Error: Objects are not valid as a React child

1 Answers