为什么 `urql-cachegraph` `cache.resolve()` 需要输入/输出？答案

【问题标题】：Why is `urql-cachegraph` `cache.resolve()` expected input / output?为什么 `urql-cachegraph` `cache.resolve()` 需要输入/输出？
【发布时间】：2022-11-18 11:14:16
【问题描述】：

我在 youtube 上关注 Ben Awad 的“Fullstack React GraphQL TypeScript 教程”。它已经有几年历史了，所以我争先恐后地修改代码以使用更新的包，特别是这里的 urql-graphcache。

如果你也跟着一起，我已经接近 7:48 时间标记了。

我通读了有关 cache.resolve() 方法的文档。

这些是文档中的示例

// This may resolve a link:
cache.resolve({ __typename: 'Query' }, 'todo', { id: 1 }); // 'Todo:1'

// This may also resolve records / scalar values:
cache.resolve({ __typename: 'Todo', id: 1 }, 'id'); // 1

// You can also chain multiple calls to `cache.resolve`!
cache.resolve(cache.resolve({ __typename: 'Query' }, 'todo', { id: 1 }), 'id'); // 1

这些示例没有解释我在我的应用程序中获得的恰好适用于教程的行为。

//first resolve call
const res = cache.resolve("Query", "posts({"limit":10})") //Query.posts({"limit":10})

//second resolve call
const res2 = cache.resovle(res as Entity, 'posts') // [Post:1, Post:2, Post:3]

看起来 cache.resolve() 实际上是 2 个根本不同的函数的包装器。但是为什么会这样呢？

第一个 cach.resolve() 解决的是什么？ res作为实体的结果如何？

有没有一种方法可以构造调用，以便我只需要调用一次？

【问题讨论】：

标签： graphql resolver urql

【解决方案1】：

我正在学习相同的课程，并找到了基于urql pagination example on github 的解决方案。你可以直接将 resolveFieldByKey 换成 source code 中的 resolve，它的工作方式是一样的。

所以只需使用：

const isItInTheCache = cache.resolve(
  cache.resolve(entityKey, fieldKey) as string,
  "posts"
);

...

const key = cache.resolve(entityKey, fi.fieldKey) as string;
const data = cache.resolve(key, "posts") as string[];

【讨论】：

【解决方案2】：

作为最新包的一部分，我们需要使用 cache.resolve() 来查找键和相关数据。

返回类型需要与 __typename 一起使用实际结果值。因为我们正在解析实体。

https://formidable.com/open-source/urql/docs/graphcache/local-resolvers/#resolving-entities

const cursorPagination = (): Resolver<any, any, any> => {

  return (_parent, fieldArgs, cache, info) => {
    const { parentKey: entityKey, fieldName } = info;
    console.log(entityKey, fieldName);
    const allFields = cache.inspectFields(entityKey);
    console.log('allfields  ', allFields)
    const fieldInfos = allFields.filter(info => info.fieldName === fieldName);
    const size = fieldInfos.length;
    if (size === 0) {
      return undefined;
    }
    // Check if data is in cache and return it.
    
    const fieldKey = `${fieldName}(${stringifyVariables(fieldArgs)})`;
    const isItInTheCache = cache.resolve(
      cache.resolve(entityKey, fieldKey) as string,
      "posts"
    );
    console.log(fieldKey);
    info.partial = !isItInTheCache;
    const results: string[] = [];
    fieldInfos.forEach(fi => {
      const key = cache.resolve(entityKey, fi.fieldKey) as string;
      const data = cache.resolve(key,  "posts") as string[];
      results.push(...data);
    });
    console.log("results",results);
    return {
      __typename: "PaginatedPosts",
      posts: results,
    };
  };
};

希望这有帮助！

【讨论】：