Question

我正在尝试学习GraphQL，目前遇到一个问题，即在发送突变之前，我不了解如何从两个组件中获取数据。我需要从<Input>值中获取 name 变量，并从<ReactQuill>

中获取 text 变量

我应该在<Input>和<ReactQuill>的onChange属性中更新Apollo缓存吗？也许我做错了什么？

Apollo文档建议使用ref属性，但是由于每个人现在似乎都在使用受控组件，因此它已经过时了。

无论如何，我不知道如何使用客户端更新的数据将变异发送到服务器，请帮忙。

const EDIT_POST = gql`
mutation updatePost($id:Int!, $name:String!, $text:String){
    updatePost(id: $id, name: $name, text: $text){
        success
    }
}`;


<Query query={GET_POST} variables={{id: match.params.id}}>
    {({loading, error, data: {post}}) => {
        if (loading)
            return <div>Loading...</div>
        if (error)
            return <div>Error!</div>

        return (
            <div>
                <AppBar position="static">
                    <Toolbar>                        
                        <Input defaultValue={post.name}/>
                        <Mutation mutation={EDIT_POST}>
                            {(updatePost, { data, error }) => (
                                <span>
                                    <Button color="inherit" onClick={() => {
                                        updatePost({variables: {
                                            id: match.params.id,
                                            name: ??????,
                                            text: ??????
                                        }})
                                    }}>Save</Button>                                    
                                </span>
                            )}
                        </Mutation>
                    </Toolbar>
                </AppBar>
                <div>
                    <ReactQuill defaultValue={post.text} style={{'height': '100%'}}></ReactQuill>
                </div>
            </div>
        )
    }}
</Query>

如何从Input和ReactQuill组件获取数据以将其用作突变变量

0 个答案: