Как включить опцию «refetchQueries» в React Apollo Query с Typescript? - PullRequest
Новая
       26

Как включить опцию «refetchQueries» в React Apollo Query с Typescript?

0 голосов
/ 31 мая 2019

Я использую машинопись в проекте React с использованием клиента Apollo, у меня есть простая форма обновления клиента, которая требует изменения внутри запроса для получения данных клиента для отображения из его / ее идентификатора, который я создал (согласно Apollo Документация по машинописи) специализированный объект запроса для этого, 

//---------------------------------------------------------------------------------
// 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 Cache), при попытке использовать опцию "refetchQuery" в <QueryGetCustomerById> Typescript отправляет странную ошибку в мое окно VSCode.

Type errors caused by the 'refetchQueries' property

Читая документацию Apollo Typescript (очень не хватает IMHO), я обнаружил, что во втором примере есть ссылка на объект ChildProps, теперь я не уверен, должен ли я объявить или создать другой интерфейс для QueryGetCustomerById, чтобы собрать их вместе с ответом и переменными. Честно говоря, я совершенно сбит с толку, если кто-то пробовал это или знает, как это осуществить, помогите. Большое спасибо.

P.S. Использование более общей версии <Query<getCustomerById, getCustomerByIdVariables> ... также не работает.

enter image description here

1 Ответ

0 голосов
/ 31 мая 2019

Мой плохой ...

Сделав более тщательную ревизию на сайте 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)
            {
...

Сегодняшний урок для меня состоит в том, чтобы не верить сообщениям в блоге, которые я нахожу в Интернете, без проверки официальной документации. Надеюсь, этот пост кому-нибудь пригодится.

...