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

Question

我想通过函数调用 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？

Answer 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);
}

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

Answer 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>
        );
    }
}