React + Apollo + cache + refetchQueries; обновление кеша переопределяется после мутации - PullRequest
Новая
       8

React + Apollo + cache + refetchQueries; обновление кеша переопределяется после мутации

0 голосов
/ 02 июля 2019

В настоящее время я пытаюсь использовать систему кэширования Apollo в качестве единственного источника правды для моего приложения, как рекомендуется в документации. Первой попыткой было сохранить некоторые картографические данные, которые я могу обновить и получить (поддельные) запросы GraphQL, которые попадут в кэш вместо внутреннего сервера.

Вот как выглядит мой resolvers.js файл: 

export const defaults = {
    MapState: {
        __typename: 'MapState',
        activable: false,
        activeZones: [],
        clickableZones: [],
    },
};

export const resolvers = {
    Mutation: {
        updateMapState: (_, parameters, { cache, client }) => {
            const query = gql`
                query GetMapState {
                    MapState @client {
                        activable
                        activeZones
                        clickableZones
                    }
                }
            `;
            let data = client.readQuery({ query });
            if (parameters.activable) {
                data.MapState.activable = parameters.activable;
            }
            if (parameters.activeZones) {
                data.MapState.activeZones = parameters.activeZones;
            }
            if (parameters.clickableZones) {
                data.MapState.clickableZones = parameters.clickableZones;
            }

            client.writeQuery({ query, data });

            return null;
        },
    }
};

export const typeDefs = gql`
  type MapState {
    activable: Boolean!
    activeZones: [String!]!
    clickableZones: [String!]!
  }
  ...
`;

А вот звонок, который я делаю для обновления: 

ApolloClient.mutate({
    variables: {
        activable: activable,
        activeZones: activeZones,
        clickableZones: clickableZones,
    },
    mutation: UPDATE_MAP_STATE,
    refetchQueries: ['GetMapState'],
});

Данные о состоянии карты не имеют (и не должны) иметь id. Таким образом, Apollo не может по умолчанию обновлять компоненты, которые извлекают данные о состоянии карты - как в случае с моим Map компонентом посредством запроса, называемого GetMapState.

В таких случаях документация указывает, что refetchQueries следует использовать .

Итак, это работает, вроде. Когда я использую updateMapState, кеш действительно обновляется. И refetchQueries действительно извлекает содержимое состояния карты из кэша Apollo. HOWEVER (и это главная проблема), после updateMapState и до refetchQueries каким-то образом только что записанные данные кэша не записываются посредством вызова InMemoryCache.write со значениями по умолчанию , что у меня проблемы с отслеживанием.

Есть идеи, почему сделан этот звонок? Как я могу это исправить? Кажется довольно простой проблемой, но моя неопытность со стеком не позволяет мне понять, что происходит.

Использование client или cache в resolver.js дает тот же результат.

Если я удаляю refetchQueries, кеш находится в нужном мне состоянии, но мой компонент не перезагружается автоматически. Если я добавлю его, компонент будет перезагружен, но мой кэш будет переопределен.

EDIT : Когда refetchQueries не включен, это то, что у меня есть в моем кэше (показаны только интересные части): 

ROOT_QUERY
    MapState: MapState
    activable: false
    activeZones: {"type":"json","json":["COUNTRY"]}
    clickableZones: {"type":"json","json":[]}
ROOT_MUTATION
    updateMapState({"activable":false,"activeZones":["COUNTRY"],"clickableZones":[]}): null

Ключа нет MapState:something

...