variables are missing some properties from cache.inspectFields in cacheExchange

[mreza0100]

Hi folks I'm completely new to graphql and I have a problem with cache exchanges
im using gen(https://graphql-code-generator.com) and react with typescript

now I have a Query to fetch my posts and one for creating post(this two are in the same page)
when I create a post its not going to just update the cache so I'm updating it from cacheExchange
and there is several variables for Posts query

query for fetching posts:

const [{ fetching, data }] = useQuery<PostsQuery>({
	query: PostsDocument,
	variables: {
		limit: 12,
		justMe: false,
		shortText: false,
	},
});
// this will return 12 posts and just some othere vars

typeof variables :

export type PostsQueryVariables = Exact<{
	limit?: Maybe<Scalars["Int"]>;
	cursor?: Maybe<Scalars["String"]>;
	titlePattern?: Maybe<Scalars["String"]>;
	textPattern?: Maybe<Scalars["String"]>;
	justMe?: Maybe<Scalars["Boolean"]>;
	shortText?: Maybe<Scalars["Boolean"]>;
	textSize?: Maybe<Scalars["Int"]>;
}>;

PostsDocument

export const PostsDocument = gql`
	query Posts(
		$limit: Int
		$cursor: String
		$titlePattern: String
		$textPattern: String
		$justMe: Boolean
		$shortText: Boolean
		$textSize: Int
	) {
		posts(
			limit: $limit
			cursor: $cursor
			titlePattern: $titlePattern
			textPattern: $textPattern
			justMe: $justMe
		) {
			id
			title
			textSnippet(short: $shortText, size: $textSize)
			points
			createdAt
			userID
		}
	}
`;

now in my "cacheExchange < updates < Mutation < createPost":

createPost: (result, args, cache, info) => {
	const realResult = result as PostsQuery["posts"][0];
        // createPost is returning the post that created

	const postQueries = cache
		.inspectFields("Query")
		.filter(x => x.fieldName === "posts")[0];
	const variables = postQueries.arguments as any;
	// getting args from my posts Query

	const updater: any = (cachedData: PostsQuery): PostsQuery => {
		cachedData?.posts.unshift(realResult);

		console.log("cachedData: ", cachedData);
		// cachedData:  null
                // I know its null becuace variables are not the same
		console.log("variables: ", variables);
		// variables:  { justMe: false, limit: 12 }

		return cachedData;
	};

	// not working (returning null cachedData)
	cache.updateQuery({ query: PostsDocument, variables }, updater);

	// now its working correctly with hard coded shortText
	// cache.updateQuery(
	// 	{ query: PostsDocument, variables: { ...variables, shortText: false } },
	// 	updater
	// );

},

now as you can see variables from "cache.inspectFields" are missing "shortText" properye from Posts query
when I removing "shortText" from posts query variables or hard coding it everything is ok
I have no idea whats going on here 🤦‍♂️ and i have updated my all packages to the latest version
I have been look at all issues and I did not find something similar

I hope I defined my issue currectly

@kitten

[frederikhors]

Please format the code correctly.

[kitten]

I think you’re confusing variables with arguments here. A field can have arguments which is a field with a call signature basically: field(argument: true).

However variables are the dollar-prefixed signature that only the query itself accepts.

Luckily, queries don’t care about this. Basically what you’re trying to do in your updater is cachedData?.posts.unshift(realResult);. So you don’t even need to use the same query.

All that Graphcache cares about is the post’s ID and type name to match up items in the list as described here: https://formidable.com/open-source/urql/docs/graphcache/normalized-caching/

So your updater can also just use a smaller query that only updates:

posts(
  limit: $limit
  cursor: $cursor
  titlePattern: $titlePattern
  textPattern: $textPattern
  justMe: $justMe
) {
  id
}

And as long as the mutation contains this field the query will be able to update without a network request:

textSnippet(short: $shortText, size: $textSize)

That being said, it should be fine to just update the above with just the ID if you’re fine with an additional network request.

We’re trying to also make mutations like these simpler using the populate exchange in the future.

[mreza0100]

Hiya thanks kitten, it works like a charm(I didn't get how but any way )
this is what I did

createPost: (_result, args, cache, info) => {
	const result = _result as PostsQuery["posts"][0];

	const allFields = cache.inspectFields("Query");
	
	const postsQueries = allFields.filter(x => x.fieldName === "posts");

	const updater: any = (cachedData: PostsQuery): PostsQuery => {
		cachedData?.posts.unshift(result);
		return cachedData;
	};

	postsQueries.forEach(({ arguments: variables }: any) => {
		cache.updateQuery(
			{
				query: /* -> */ InternalPostsDocument,
				variables,
			},
			updater
		);
	});
},

and InternalPostsDocument:

// InternalPostsDocument was the best name in my mind :)))
export const InternalPostsDocument = gql`
	query InternalPosts(
		$limit: Int
		$cursor: String
		$titlePattern: String
		$textPattern: String
		$justMe: Boolean
	) {
		posts(
			limit: $limit
			cursor: $cursor
			titlePattern: $titlePattern
			textPattern: $textPattern
			justMe: $justMe
		) {
			id
		}
	}
`;

it wold be awesome if you change name arguments to variables

postsQueries.forEach(({ variables }: any) => {
	cache.updateQuery(
		{
			query: /* ->*/ InternalPostsDocument,
			variables,
		},
		updater
	);
});

argument is a special keyword for editor and it changing the color of it
its less confusional and easy to remember

you have some syntax error in your documentation examples
in cache.inspectFields section
https://formidable.com/open-source/urql/docs/graphcache/custom-updates/
and pay attention to x.arguments

and another question(from my codes in above): why we need to do cache.updateQuery in a forEach loop?
when I get a log from cache.updateQuery it was just one single element
what should happen to increase it to more then one query?

[kitten]

it wold be awesome if you change name arguments to variables

The thing is that arguments is not the same as variables as explained above 😅 We were thinking of naming it fieldArgs but arguments is not a reserved keyword, so we decided to go for it. Sorry, but just because it's highlighted in some editors that wasn't a good reason for us not go with the most obvious name 😅