Apollo 客户端和过滤查询

Question

我正在为观鸟者制作一个应用程序。当观鸟者看到一只鸟时，他们会记录 sighting。我想查询所有观鸟者目击事件的提要：

import { gql } from "@apollo/client";

export const GET_SIGHTINGS = gql`
  query Sightings($first: Int, $after: String) {
    sightings(first: $first, after: $after) {
      pageInfo {
        endCursor
      }
    edges {
      node {
        id
        location
        note
        seenAt
        mapImage
        images {
          id
          url
        }
        user {
          id
          name
          emoji
        }
        bird {
          id
          commonName
        }
      }
    }
  }
}
`;

这很好用。现在我想为个别观鸟者的目击事件提供单独的提要。（此查询在服务器上运行良好）：

import { gql } from "@apollo/client";

export const MY_SIGHTINGS = gql`
  query MySightings($first: Int, $after: String, $userId: ID) {
    mySightings: sightings(first: $first, after: $after, userId: $userId) @connection(key: "sightings", filter: ["userId"]) {
      pageInfo {
        endCursor
      }
      edges {
        node {
          id
          location
          note
          seenAt
          mapImage
          images {
            id
            url
          }
          user {
            id
            name
            emoji
          }
          bird {
            id
            commonName
          }
        }
      }
    }
  }
`;

第一次筛选查询运行时，这工作正常，但是一旦呈现主要提要组件，个人提要现在充满了每个人的目击。如何让缓存区分这两个查询？ @connection 指令听起来像是诀窍，但显然不是

Answer 1

我正在为我的 API 使用 Relay Specification，这意味着我的 'collections' 是对象而不是数组。这意味着我需要设置一个特定的类型策略来让分页工作。不幸的是，这也破坏了 Apollos 对查询参数的自动处理。结果我需要将 userId 添加到我的类型策略的 keyargs 部分：

const cache = new InMemoryCache({
  typePolicies: {
    Query: {
      fields: {
        sightings: {
          keyArgs: ["userId"],          
          merge(existing, incoming, { args }) {
            if (args && !args.after) {
              return incoming;
            }
            if (!existing) {
              return incoming;
            }
            const edges = unionBy("node.__ref", existing.edges, incoming.edges);
            return { ...incoming, edges };
          },
        },
      },
    },
  },
});

Apollo 客户端和过滤查询

Apollo Client and filtered queries

javascript

apollo

graphql

apollo-client