如何在reactjs组件中调用graphql (magento 2 pwa)

Question

我不熟悉reactjs，我尝试在magento 2 pwa工作室中创建一个新的自定义reactjs js组件来调用自定义graphql并写出响应，下面是我的试用版。

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

响应格式应为

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

好像我不能访问quoteData，有人知道怎么做吗？

Answer 1

您的组件需要与客户端一起包装在ApolloProvider中。

1. 创建客户端

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

1. 将其提供给阿波罗供应商

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

另外，请确保下载阿波罗开发工具。

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

火狐：https://addons.mozilla.org/en-GB/firefox/addon/apollo-developer-tools/

此外，为了避免错误(例如，映射未定义)，请替换此部分：

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

通过以下方式：

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

Answer 2

这就是我如何在pwa工作室中使用graphql查询获得商店徽标的方法。

    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;