Cannot get access to nested query

Question

I want to render on the page, simple data from manual API, but it seems that I cannot get access to the nested query.

This is what I have:

import React from 'react';
import {
    gql,
    graphql,
} from 'react-apollo';

//access to queries and map function
const ChannelsList = ({ data: {loading, error, items }}) => {
  if (loading) {
    return <p>Loading ...</p>;
  }
  if (error) {
    return <p>{error.message}</p>;
  }

  return (
    <div className="channelsList">

      { items.map( itm => <div key={itm.id} className="channel">{itm.sku}</div> ) }
    </div>
  );
};

const channelsListQuery = gql`
  query ChannelsListQuery {
      allLinks {
        items {
          id
          sku
        }
      }
  }
`;

export default graphql(channelsListQuery)(ChannelsList);

Don't mind this "channel" names, this is from example that I used for my own api. The problem is, all the queries that contain "id, names, sku" etc is in "items" type and it looks like for me it cannot get access to it. The query in graphqli server is working perfectly. So, the question is- how to get access to nested queries, so that I can use map and render it on page?

Schema structure:

const typeDefs = `
type Link {
    items: [itemapi]      
    }

    type itemapi {
        id: ID!
        sku: String!
        name: String!
    }
    type Query {
    allLinks: Link!
  }
`;

@Solution by @OzySky

const ChannelsList = ({ data: {loading, error, allLinks }}) => {
  if (loading) {
    return <p>Loading ...</p>;
  }
  if (error) {
    return <p>{error.message}</p>;
  }

  return (
    <div className="channelsList">
      { allLinks.items.map( aLitm => <div key={aLitm.id} className="channel">{aLitm.sku}</div> ) }
    </div>
  );
};

OzySky · Accepted Answer · 2018-01-29 13:41:31Z

1

In react-apollo, query data is passed through a prop with the name of the query. So in your case you would access items through the data.allLinks prop.

answered Jan 29, 2018 at 13:41

OzySky

261 silver badge3 bronze badges

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

6 Comments

Brunhilda Over a year ago

You mean, instead of items i should use allLinks and that get me access to items?

Mat Over a year ago

This is really a comment, not an answer. With a bit more rep, you will be able to post comments.

OzySky Over a year ago

From what I understood from you allLinks should be an array of type items, but that depends of course on the way you structured your schema

OzySky Over a year ago

Then data.allLinks.items should be an array of type itemapi

Brunhilda Over a year ago

@OzySky Edited first post, take a look, it still dont render anything.

|

kinxiel · Accepted Answer · 2019-07-06 08:37:13Z

0

If you have a highly nested return value from your query one way to access the nested object is to first turn it into an array with Object.values(). Then access the field the array items and their corresponding values with dot notation.

const myQuery = gql`
  query {
    users {
      id
      name
      pet {
        id
        name
      }
    }
  }
`;

// Inside Render function if using React ...
return users.map(({ id, name, pet }) => (
        <div key={id}>
          <ul>
            <li>
              {id} {name}
              {Object.values({ pet })[0].name}
            </li>
          </ul>
        </div>
      ));

answered Jul 6, 2019 at 8:37

kinxiel

8131 gold badge7 silver badges8 bronze badges

Collectives™ on Stack Overflow

Cannot get access to nested query

2 Answers 2

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related