从不同的请求字段读取缓存

Read cache from a different request field

使用 React Native 和 Apollo 客户端,我正在尝试从不同的请求字段正确写入和读取缓存。 我基本上有两种对象类型:'User' & 'Event',我有那些“请求:

所有事件:(事件列表屏幕)

events {
    id
    numberOfParticipants
}

连接用户与他注册的事件:(议程屏幕)

me {
    id
    myEvents {
        id
    }
}

用户注册事件的突变:(事件详细信息屏幕)

mutation {
    registerToAnEvent (id: number) {
        event {
            id
            numberOfParticipants
        }
    }

当用户通过调用 mutation 注册事件时:

我已经做了: 缓存已更新,事件列表屏幕数据会立即受到影响。 (参加人数变化)

我现在想实现的:我想立即从缓存修改中影响议程屏幕。无论出于何种原因,我都必须调用 refetch 来更新它。 (当用户注册/注销时,事件应该从列表中消失或出现)

这是我的 InMomoryCache 实现的一些代码:

Query: {
  fields: {
    event: {
      read(_, {args, toReference}) {
        return toReference({
          __typename: 'Event',
          id: args.id,
        });
      },
    },
    events: {
      keyArgs: false,
      merge(existing: any[], incoming: any[], allArgs) {
        const events: any[] = existing ? Object.values({...existing}) : [];
        const newEvents = incoming ? incoming : [];
        newEvents.forEach((event: any) => {
          events.push(event);
        });
        return events;
      },
    },
},
User: {
  fields: {
    eventsParticipating: {
      merge(existing: any[], incoming: any[], allArgs) {
        const events: any[] = existing ? Object.values({...existing}) : [];
        const newEvents = incoming ? incoming : [];
        newEvents.forEach((event: any) => {
          events.push(event);
        });
        return events;
      },
    },
},

感谢您的帮助:)

我设法做到了。实际上我不得不使用突变的更新功能,因为确实在缓存中修改了对象,但是 returns 用户事件列表的查询没有重新执行,所以它保持相同数量的引用。

如果突变返回的事件中的成员列表包含经过身份验证的用户,则将该引用添加到缓存列表中。 (如果您的对象未缓存(即新评论),您可能想使用 writeFragment)。

否则从数组中删除该引用。

https://www.apollographql.com/docs/react/caching/cache-interaction/

cache.identify() returns 这种形式的结果:<__tymename>:<id>

Refs很容易被恶搞,就是{ __ref: <reference> }

此外,modify() 函数采用如下所示的 id:<__tymename>:<id>(如果您想针对特定对象)。

我认为最好使用 cache.identify() 作为 modify() 的 id,但在这种特殊情况下它为我返回了 undefined。

这是我的代码:

const [
setParticipation,
{data: dataParticipation, loading: loadingParticipation},
] = useMutation(setParticipationMutation, {
    update(cache, result) {
      cache.modify({
        id: 'User:' + user.id,
        fields: {
          eventsParticipating(events = []) {
            const ref = cache.identify(result.data.eventsParticipating);
            if (
              result.data.eventsParticipating.members.filter(
                m => m.id == user.id,
              ).length > 0
            ) {
              return [...events, {__ref: ref}]; // remove ref from array
            } else {
              return events.filter(e => e.__ref != ref); // add ref to array
            }
          },
        },
      });
    },
  });