Why is `urql-cachegraph` `cache.resolve()` expected input / output?

Question

I am following Ben Awad's "Fullstack React GraphQL TypeScript Tutorial" on youtube. It is a few years old, so I am scrambling to modify the code to work with updated packages, specifically here urql-graphcache.

If you are also following along, I'm near the 7:48 time mark.

I read through the documentation about the cache.resolve() method.

These are the examples from the docs

// 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

These examples do not explain the behavior I get in my app that happens to work for the tutorial.

//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]

It seems like cache.resolve() is actually a wrapper for 2 fundamentally different functions. But why would it be like this?

What is the first cach.resolve() resolving? How is the result of the res act as an Entity?

Is there a way to structure the call so that I only need to call it once?

score 0 · Answer 1 · answered Nov 15 '22 at 15:32

I am following the same course, and found the solution based on the urql pagination example on github. You can literally just swap resolveFieldByKey to resolve in the source code, an it works the same way.

So just use:

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[];

score 0 · Answer 2 · answered Nov 18 '22 at 02:39

As part of the latest package, we need to use cache.resolve() to find the key and associated data.

return type it needs to be with __typename with the actual result value. As we are resolving entities.

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,
    };
  };
};

Hope this help!

Why is `urql-cachegraph` `cache.resolve()` expected input / output?

2 Answers2