React / Apollo: Displaying result of GraphQL query (useQuery hook)

Question

I am new to react/graphql/apollo however I have followed the guide on how to do a graphql query using Apollo on www.apollographql.com. However I don't seem to be able to show the result.

This is the code I am executing to do the query

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

const GET_PRODUCTS = gql`
  query getProducts{
    products(first: 1) {
      edges {
        node {
          id
          name
        }
      }
    }
}
`;

const StartPage = () => {
  const { loading, error, returnData } = useQuery(GET_PRODUCTS, {
    variables: {},
  });
 
  return (
    <p>Hello world, this should be the data: {returnData}</p>
  );
};

I only see "Hello world, this should be the data:" but the returnData is not printed? Can't I just print the entire response?

When I reload the page I can clearly see in the networks tab that my query does get executed and I get a correct response back

request

{"operationName":"getProducts","variables":{},"query":"query getProducts {\n  products(first: 1) {\n    edges {\n      node {\n        id\n        name\n        __typename\n      }\n      __typename\n    }\n    __typename\n  }\n}\n"}

response

{"data":{"products":{"edges":[{"node":{"id":"UHJvZHVjdDo3Mg==","name":"Apple Juice","__typename":"Product"},"__typename":"ProductCountableEdge"}],"__typename":"ProductCountableConnection"}}}

So does anyone have an idea why returnData is not printed / is empty?

can't you just copy/paste more code from example? ... if(loading)... is for some reason ... data can be renamed but other way ... I guess no earlier react loading data experience — xadm
– xadm, Commented Aug 25, 2020 at 14:15

Dom · Accepted Answer · 2020-08-25 14:12:13Z

1

It should be const { loading, error, data } = useQuery(GET_PRODUCTS, ...); Note: data instead of returnData.

When you destructure objects, you need to be exact when it comes to the key. If you need the data to live in a variable called returnData, you could do something like this:

const { loading, error, data: returnData } = useQuery(GET_PRODUCTS, {
  variables: {},
});

Also be aware that in React you cannot just render objects inside curly braces, React expects a string or a number. For quick debugging you could add

return (
  <p>Hello world, this should be the data: {JSON.stringify(returnData)}</p
);

Otherwise you should display data from deep inside the return object.

edited Aug 25, 2020 at 14:12

answered Aug 25, 2020 at 14:07

Dom

7443 silver badges8 bronze badges

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

2 Comments

Liwe11 Over a year ago

Thank you very much this worked! Only one follow up question, what if I just want to display the name of that first product given the query response I have provided isn't this how it is supposed to be printed : <p>Hello this should be the data {JSON.stringify(data)}, name: {data.products.edges[0].node.name}</p> however this does not work?

Liwe11 Over a year ago

Ah nevermind I solved the follow up question. It turns out you really have to only print {data.products.edges[0].node.name} once you are sure the data is loaded, it could not contain those objects at first

Collectives™ on Stack Overflow

React / Apollo: Displaying result of GraphQL query (useQuery hook)

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related