Question

我正在尝试使用React在Apollo Client中进行查询，而不返回JSX组件，而只是返回一个对象（对Apollo Server进行通用查询时会收到data对象）。

我尝试使用<Query />组件，但它返回了我一个React Node，我只需要一个对象。当我要做的只是发送请求并在回调中处理响应时，文档仅说明在某个时候返回JSX组件的方法。

实际上我正在尝试这种方式（我在React中使用TypeScript）

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

const MY_QUERY = gql`
  query MY_QUERY {
    myQuery {
      attr1
      attr2
    }
  }
`;

const res = ({ client }: { client: any }) =>
  client
    .query(MY_QUERY)
    .then((data: { data: any }) => data);

withApollo(res);

console.log(res);

有了这个，我正在寻找的是像

这样的对象。

{
  "data": {
    "myQuery": [
      {
        "attr1": "something 1...",
        "attr2": "another thing 1..."
      },
      {
        "attr1": "something 2...",
        "attr2": "another thing 2..."
      },
      {
        "attr1": "something 3...",
        "attr2": "another thing 3..."
      }
    ]
  }
}

但是我从浏览器收到的是

ƒ WithApollo(props) {
    var _this = _super.call(this, props) || this;

    _this.setWrappedInstance = _this.setWrappedInstance.bind(_this);
    return _this;
}

有什么建议吗？

Answer 1

试试这个

class anyComponent extends React.Component<Props> {
   state = {
      results: null,
   }
   componentDidMount = async () => {
       const {client} = this.props;
       res = await client.query({query: MY_QUERY});
       console.log(res);
       this.setState({results: res})
   }
   render() {
       // check if any results exist (just an example)
       return results ? <AnyJsx results={results}/> : null;
   }
}
export default withApollo(anyComponent);

您在控制台上记录了该函数，而不是调用它来获取其结果您可能需要一些生命周期函数，例如componentDidMount才能检索数据

Answer 2

这是Apollo query的通用语法：

<Query query={MY_QUERY} variables={yourJSONvariables}>
    {({ loading, error, data }) => {
        if (error) return <p>Error : {error.message}</p>
        if (loading) return <p>Loading....</p>
        if (data) return data.myQuery.map(thing =>
            <p>
                {thing.attr1}
                <span>{thing.attr2}></span>
            </p> 
        )
    }}
</Query>

查询将接受一个函数作为其子元素，该函数将接收包含3个信息的变量：

error
loading
data

然后，您可以使用这些值来呈现所需的内容，具体取决于从查询中收到的内容。该函数将呈现您返回的内容。

如果出现问题，您可以在浏览器控制台的“网络”标签中检查以查看GQL发送给您的错误。

Query元素本身不呈现任何html，它只是加载数据，您应该将其包装在需要它的元素周围。

如何在Apollo Client中使用没有JSX组件的client.query？

2 个答案: