是否有可能从阿波罗缓存' readFragment '，如果它没有id?

Question

我有一个嵌套的组件在我的应用程序。

在页面的顶部，我有一个像

这样的查询

const REPOSITORY_PAGE_QUERY = gql`
  query RepositoryPageQuery($name: String!, $owner: String!) {
    repository(name: $name, owner: $owner) {
      ...RepositoryDetailsFragment
    }
  }
  ${REPOSITORY_DETAILS_FRAGMENT}
`;

RepositoryDetailsFragment则包含

// list of branches
refs(first: 2, refPrefix: "refs/heads/") {
  ...BranchesFragment
}

最后和

fragment BranchesFragment on RefConnection {
    totalCount
    pageInfo {
      ...PageInfoFragment
    }
    edges {
      node {
        id
        name
      }
    }
  }
  ${PAGE_INFO_FRAGMENT}

显然，我不高兴，因为我需要通过大约3级深的BranchesFragment信息。

相反，如果我可以直接从我的BranchesList组件的缓存中读取它，那将是伟大的。我试着用

client.cache.readFragment({
   fragment: BRANCHES_FRAGMENT,
   fragmentName: "BranchesFragment"
});

但是问题是这个片段没有任何id。有什么方法来处理它，并得到片段信息?

Answer 1

好了，我突然想到了解决办法。也许对别人有用。

假设我们有一个层次结构的查询->片段和组件->像这样的子组件:

RootPageComponent 查询

query RepositoryPageQuery(
    $name: String!
    $owner: String!
    $count: Int!
    $branchSearchStr: String!
  ) {
    repository(name: $name, owner: $owner) {
      ...RepositoryDetailsFragment
    }
  }
  ${REPOSITORY_DETAILS_FRAGMENT}

组件返回以下

<RepositoryDetails repository={data.repository} />

RepositoryDetails 有一个片段

fragment RepositoryDetailsFragment on Repository {
    name
    descriptionHTML
    defaultBranchRef {
      id
      name
    }
    # the branches repository has
    refs(first: $count, refPrefix: "refs/heads/", query: $branchSearchStr) {
      ...BranchesFragment
    }
  }
  ${BRANCHES_FRAGMENT}

，返回<BranchesList />分量。

因此，与其将branch.info从RootPage传递给RepositoryDetails，然后再传递给BranchesList;

您可以在BranchesList

中执行以下操作

const client = useApolloClient();
client.cache.readFragment({
    fragment: BRANCHES_FRAGMENT,
    fragmentName: "BranchesFragment",
    id: "RefConnection:{}" // note this {} - apollow cache adds it when no id is present for the object
})

重要!

确保也为字段更新type policy并设置keyArgs to []

所以在这个特殊的例子中:

RefConnection: {
  keyFields: []
  ...
}

这将给出相同的结果，但您不必将props传递给嵌套组件，而是可以直接从缓存中读取(就像使用redux一样)