Unexpected error upon making a Query to GraphQL server from React

Question

I am getting an error: Expected an assignment or function call and instead saw an expression at the Query Tag and second at the div inside my map function, when I am making a query to the backend GraphQL server.

Here is my query.component.jsx file code:

import React from 'react';
import {Query} from 'react-apollo';
import {gql} from 'apollo-boost';

const GET_COMMUNITY = gql`
    query Community {
        Community {
        isOpen
        member_count
        name
        description
        }
    }
`;

const TestQuery = () => {
    <Query query={GET_COMMUNITY}>
        {
            ({loading,error, data:{Community}}) => {
                if(loading) return <h1>Loading...</h1>;
                if(error) return <h1>Error occured...</h1>;
                return (
                    Community.map((item) =>{
                        <div className="community_members">
                        <p>{item.isOpen}</p>
                        <p>{item.member_count}</p>
                        <p>{item.name}</p>
                        <p>{item.description}</p>
                        <br />
                        </div>
                    })
                );
            }
        }
    </Query>
};
export default TestQuery;

Is this error because of the map function that I have used?? Please help me out on how to solve these types of issues as finding bugs in React Codes become a bit difficult as compared to other languages/frameworks.

try to rename `Community` into `community` – xadm May 17 '20 at 17:19 — xadm, May 17 '20 at 17:19

score -1 · Accepted Answer · answered May 17 '20 at 17:40

You are not returning the value inside map which is why you get this error.

Either you use an explicit return like below

return (
    Community.map((item) =>{ 
     return (    // return statement here
        <div className="community_members">
        <p>{item.isOpen}</p>
        <p>{item.member_count}</p>
        <p>{item.name}</p>
        <p>{item.description}</p>
        <br />
        </div>
      )
    })
);

or an implicit return like

return (
    Community.map((item) => ( // Implicit return
        <div className="community_members">
        <p>{item.isOpen}</p>
        <p>{item.member_count}</p>
        <p>{item.name}</p>
        <p>{item.description}</p>
        <br />
        </div>
      )
   )
);

please check this post for information on the above syntaxes

Unexpected error upon making a Query to GraphQL server from React

1 Answers1