how to call graphql in reactjs component (magento 2 pwa)

Question

I'm not familiar with reactjs, i'm try to create a new custom react js componet in magento 2 pwa studio to call a custom graphql and write out the response, the following it my trial.

import React from 'react';
import { FormattedMessage, useIntl } from 'react-intl';
import { shape, string } from 'prop-types';
import TextInput from "../../../../../venia-ui/lib/components/TextInput";
import {isRequired} from "../../../../../venia-ui/lib/util/formValidators";
import Field from "../../../../../venia-ui/lib/components/Field";
import LinkButton from "../../../../../venia-ui/lib/components/LinkButton";
import { useQuery } from '@apollo/client';
//import { GET_BRANDS_LIST } from './testq.gql.js'

import gql from 'graphql-tag';

const Test = () => {
    const FILMS_QUERY = gql`
        {
            quoteData(id: 1) {
                base_currency_code
                customer_name
                grand_total
            }
        }
    `;
    const { data, loading, error } = useQuery(FILMS_QUERY);

    return (
        <div
            className="abc"
            data-cy="editForm-changePasswordButtonContainer"
        >
                <ul>
                    {data.quoteData.map((launch) => (
                        <li key={launch.id}>{launch.customer_name}</li>
                    ))}
                </ul>
        </div>
    )
}
export default Test

the response format should be

{
  "data": {
    "quoteData": {
      "base_currency_code": "EUR",
      "customer_name": "Veronica Costello",
      "grand_total": "78.6100"
    }
  }
}

seems that i can't access the quoteData, anyone know how to do that?

Answer 1

Your Component needs to be wrapped in an ApolloProvider, with a client.

1. Create a client

const client = new ApolloClient({
  uri: 'your_uri',
  cache: new InMemoryCache()
});

2. Provide it to the Apollo Provider

<ApolloProvider client={client}>
{(client) => {
<YourComponentHere/>
}}
<ApolloProvider

Also, make sure you download Apollo developer tools

Chrome: https://chrome.google.com/webstore/detail/apollo-client-devtools/jdkknkkbebbapilgoeccciglkfbmbnfm

Firefox:https://addons.mozilla.org/en-GB/firefox/addon/apollo-developer-tools/

Also, to avoid errors (mapping undefined for example) replace this part:

<ul>
{data.quoteData.map((launch) => (
   <li key={launch.id}>{launch.customer_name}</li>  ))}
</ul>

With:

<ul>
{data && data?.quoteData.length > 0 && data.quoteData.map((launch) => (
   <li key={launch.id}>{launch.customer_name}</li>  ))}
</ul>

Answer 2

This is how I get the store logo using graphql query in pwa studio

    import React from 'react';
    import {gql, useQuery} from '@apollo/client';
        
    const GET_STORE_LOGO = gql`
       query getStoreLogo {
           storeConfig {
                secure_base_media_url
                header_logo_src
            }
          }
     `;
    
     const Logo = () => {
       const {loading, error, data} = useQuery(GET_STORE_LOGO);
       if (loading) return 'Loading...';
       if (error) return `Error!`;
        
     return (
          <>
            <img
             src={data.storeConfig.secure_base_media_url + "logo/" + data.storeConfig.header_logo_src}
                    />
                </>
            );
        };
        
        
    export default Logo;