如何通过函数调用函数clinet.query？答案

【问题标题】：How can I call the function clinet.query through the function?如何通过函数调用函数clinet.query？
【发布时间】：2019-12-12 06:42:51
【问题描述】：

我想通过函数调用client.query，但是它不起作用。例如，当用户点击一个按钮时，我想调用一个名为handleClick的函数来获取查询下面是一个如何通过函数调用client.query的例子

class DelayedQuery extends Component {
    state = { dog: null };

    onDogFetched = dog => this.setState(() => ({ dog }));

    handleClick = (client) => {  //<-------I call the function
        async () => {
            const { data } = await client.query({
                query: GET_DOG_PHOTO,
                variables: { breed: "bulldog" }
            });
            this.onDogFetched(data.dog);
        }
    }

    render() {
        return (
            <ApolloConsumer>
                {client => (
                    <div>
                        {this.state.dog && <img src={this.state.dog.displayImage} />}
                        <button onClick={()=>this.handleClick(client) } > Click me! </button> // <-------I call handleClick 
                    </div>
                )}
            </ApolloConsumer>
        );
    }
}

如何通过函数调用函数clinet.query？

【问题讨论】：

什么都没发生吗？或者你得到一个特定的错误？
是的，没有任何事情发生
您的代码会到达哪里？有没有到handleClick函数？
是的，和例子一模一样
不应该 handleClick = () => { 是 handleClick = client => { 吗？否则，您不会将 client 传递给您的 handleClick() 函数。

标签： reactjs react-apollo apollo-client

【解决方案1】：

所以你有两个问题。 1.你没有将客户端传递给你的函数，所以在函数生效后会出现问题。这样做：

 handleClick = client => {...}

2。您实际上并没有在 handleClick 中调用您的内部函数。您只需等待函数的生成。在它之后调用它来调用它：

async () => {
        const { data } = await client.query({
            query: GET_DOG_PHOTO,
            variables: { breed: "bulldog" }
        });
        this.onDogFetched(data.dog);
    }();

或单独创建和执行：

 async () => {
        const fetch = client.query({
            query: GET_DOG_PHOTO,
            variables: { breed: "bulldog" }
        });
        const { data } = await fetch();
        this.onDogFetched(data.dog);
    }

或者只是让点击异步：

handleClick = async client => {
   const { data } = await client.query({
            query: GET_DOG_PHOTO,
            variables: { breed: "bulldog" }
        });
        this.onDogFetched(data.dog);
}

希望这会有所帮助。编码愉快。

【讨论】：

【解决方案2】：

我通过使 handleClick 异步来解决问题

class DelayedQuery extends Component {
    state = { dog: null };

    onDogFetched = dog => this.setState(() => ({ dog }));

    handleClick = async (client) => {
            const { data } = await client.query({
                query: GET_DOG_PHOTO,
                variables: { breed: "bulldog" }
            });
            this.onDogFetched(data.dog);
    }

    render() {
        return (
            <ApolloConsumer>
                {client => (
                    <div>
                        {this.state.dog && <img src={this.state.dog.displayImage} />}
                        <button onClick={()=>this.handleClick(client) } > Click me! </button>
                    </div>
                )}
            </ApolloConsumer>
        );
    }
}

【讨论】：