React + GraphQL: dataArray.map is not a function

Question

I Just started learning graphQL and Apollo.

Below is the sample client side code using Apollo client.

I am providing data from nodemon express server.

console.log(data) shows the output from the server.

However i was trying to display the query result using the apollo client but i was unbale to do so. I am stuck in this , any help will be appreciated.

import React from "react"
import { Query } from "react-apollo";
import gql from "graphql-tag";

export const ExchangeRates = () => (
    <Query
        query={gql`
      {
        counterparty {
         name
       }
      }
    `}
    >
        {({ loading, error, data }) => {
            if (loading) return <p>Loading...</p>;
            if (error) return <p>Error :(</p>;

            console.log(data)   // Works fine as expected
            var a= data.map(x=>{
                return x.name
            })

            return <div> Data {a}</div> // stuck here ..how to display data
        }}

    </Query>
);

The following codes gives an error and says

TypeError: data.map is not a function

However the console.log(data) works fine and the following output:-

Piyush Jain · Accepted Answer · 2018-04-10 05:31:50Z

1

Your are doing wrong here... your array is inside data.counterparty... try this

var a= data.counterparty.map(x=>{
                return x.name
            })

answered Apr 10, 2018 at 5:31

Piyush Jain

1851 silver badge12 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

AConsumer Over a year ago

Worked ! Thanks Bro

Collectives™ on Stack Overflow

React + GraphQL: dataArray.map is not a function

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related