如何在使用 Typescript 的 React Apollo Query 中包含“refetchQueries”选项？

Question

我在使用 Apollo 客户端的 React 项目中使用打字稿，我有一个简单的更新客户表单，需要在 Query 中进行突变，以便从我创建的他/她的 ID 中显示客户数据（根据 Apollo Typescript 文档）一个专门的查询对象，

//---------------------------------------------------------------------------------
// Imports Section (React/Apollo Libs)
//---------------------------------------------------------------------------------
import { gql }                  from 'apollo-boost';
import { Query }                from 'react-apollo'

import { getCustomerById }            from '../../typeDefs/operations/getCustomerById'
import { getCustomerByIdVariables }   from '../../typeDefs/operations/getCustomerById'

//---------------------------------------------------------------------------------
// GQL Query: Customers
//---------------------------------------------------------------------------------
export const Q_GET_CUSTOMER_BY_ID = gql`
    query getCustomerById($id: ID) {
        getCustomer(id: $id)
        {
            first_name
            last_name
            company
            emails {
                email
            }
            age
            type
        }
    }
`;

//---------------------------------------------------------------------------------
// Query Class: Customers
//---------------------------------------------------------------------------------
export class QueryGetCustomerById extends Query<getCustomerById, getCustomerByIdVariables> { }

一切都按预期工作......直到更改后再次进入“编辑客户”视图，其中数据似乎没有变化，（这显然是由于 Apollo 缓存），当尝试使用 @ 中的“refetchQuery”选项时987654326@ Typescript 向我的 VSCode 窗口发送一个奇怪的错误。

阅读 Apollo Typescript 文档（非常缺乏恕我直言）我发现在其第二个示例中引用了 ChildProps 对象，现在我不确定是否应该为 QueryGetCustomerById 声明或创建另一个接口以一起使用与响应和变量的。老实说，我在这一点上完全感到困惑，如果有人尝试过或知道如何实现它，请提供帮助。非常感谢。

附：使用更通用的版本<Query<getCustomerById, getCustomerByIdVariables> ... 也不起作用。

Answer 1

我的错……

在 Apollo Docs 站点做了更仔细的修改，我发现<Query> 标签可以在返回的箭头函数中将 'refetch()' 方法传递给查询，而该方法又可以在突变函数之后执行。我刚试了一下，效果很好！这是如果有人遇到相同问题并看到此页面的代码..

               <QueryGetCustomerById 
                    query={Q_GET_CUSTOMER_BY_ID} 
                    variables={{ id: id }}
                >
                    {({ loading, error, data, refetch }) => {
                        if (loading)
                        {
                            return "Put something that looks good for loading here..."
                        }
                        if (error)
                        {
                            return `Error: ${error.message}` 
                        }
                        if (data && data.getCustomer)
                        {
                            this.setCustomer(id, data.getCustomer as CustomerInput)
                        }
                        return (
                            <div className="row justify-content-center">
                                <MutationUpdateCustomer 
                                    mutation={M_UPDATE_CUSTOMER}
                                    onCompleted={() => this.props.history.push('/')}
                                >
                                {
                                    (updateCustomer) => {
                                        return (
                                            <form name="frmEditCustomer"
                                                className="col-md-8 m-3"
                                                onSubmit={e => this.frmEditCustomer_submit(e, updateCustomer, refetch)}
                                                onChange={e => this.frmEditCustomer_change(e)}
                                            >
...

refetch() 在 form_submit() 事件处理程序中作为另一个参数发送，因此可以稍后执行...

            try
            {
                await updateCustomer({
                    variables: { input }
                })

                await refetch()

                Swal.fire(
                    'Update Customer',
                    'Customer data has been successfully saved.',
                    'success'
                )
            }
            catch (error)
            {
...

今天给我的教训是，在没有查看官方文档的情况下，不要相信我在网络上找到的任何博客文章。我希望这篇文章可能对某人有用。