Js: Added support for @tanstack/vue-query

[Napalys]

This pull request adds package modeling support for @tanstack/vue-query. Additionally, it includes the previously missing model for useQueries in @tanstack/react-query.

DCA looks good, but there are no new alerts since most of the repositories use Vue 3.

[Copilot]

Pull Request Overview

This PR adds support for the @tanstack/vue-query package and models the useQueries function for @tanstack/react-query. Key changes include new test files with queries using react-query and vue-query, updated change notes, and extended YAML models for query taint analysis.

Reviewed Changes

Copilot reviewed 6 out of 7 changed files in this pull request and generated 3 comments.

Show a summary per file

File	Description
javascript/ql/test/query-tests/Security/CWE-079/DomBasedXssWithResponseThreat/testReactUseQueries.jsx	Adds a React component using useQueries with two queries
javascript/ql/lib/change-notes/2025-03-13-tanstack-vue.md	Documents the addition of support for @tanstack/vue-query
javascript/ql/lib/ext/tanstack.model.yml	Extends query model definitions for vue-query and useQueries
javascript/ql/test/query-tests/Security/CWE-079/DomBasedXssWithResponseThreat/test.vue	Introduces a Vue component with a useQuery example
javascript/ql/test/query-tests/Security/CWE-079/DomBasedXssWithResponseThreat/testUseQueries.vue	Introduces a Vue component using useQueries with mapped query functions
javascript/ql/test/query-tests/Security/CWE-079/DomBasedXssWithResponseThreat/testUseQueries2.vue	Introduces a second Vue component using useQueries with multiple query functions

Files not reviewed (1)

• javascript/ql/test/query-tests/Security/CWE-079/DomBasedXssWithResponseThreat/Xss.expected: Language not supported

Comments suppressed due to low confidence (1)

javascript/ql/test/query-tests/Security/CWE-079/DomBasedXssWithResponseThreat/testUseQueries.vue:11

• The fetch call uses a template literal that does not interpolate a variable; this may lead to an invalid URL.

const response = await fetch("${id}"); // $ MISSING: Source

Tip: Leave feedback on Copilot's review comments with the 👎 and 👍 buttons to help improve review quality. Learn more

[asgerf]

Suggested change

	- ["@tanstack/angular-query-experimental", "Member[injectQuery]", "Argument[0].ReturnValue.Member[queryFn].ReturnValue", "ReturnValue.Member[data].Awaited", "taint"]
	- ["@tanstack/angular-query", "Member[injectQuery]", "Argument[0].ReturnValue.Member[queryFn].ReturnValue", "ReturnValue.Member[data].Awaited", "taint"]
	- ["@tanstack/vue-query", "Member[useQuery]", "Argument[0].Member[queryFn].ReturnValue.Awaited", "ReturnValue.Member[data]", "taint"]
	- ["@tanstack/vue-query", "Member[useQueries]", "Argument[0].Member[queries].ArrayElement.Member[queryFn].ReturnValue.Awaited", "ReturnValue.AnyMember.Member[data]", "taint"]
	- ["@tanstack/react-query", "Member[useQueries]", "Argument[0].Member[queries].ArrayElement.Member[queryFn].ReturnValue.Awaited", "ReturnValue.AnyMember.Member[data]", "taint"]
	- ["@tanstack/angular-query-experimental", "Member[injectQuery]", "Argument[0].ReturnValue.Member[queryFn].ReturnValue", "ReturnValue.Member[data].Awaited", "value"]
	- ["@tanstack/angular-query", "Member[injectQuery]", "Argument[0].ReturnValue.Member[queryFn].ReturnValue", "ReturnValue.Member[data].Awaited", "value"]
	- ["@tanstack/vue-query", "Member[useQuery]", "Argument[0].Member[queryFn].ReturnValue.Awaited", "ReturnValue.Member[data]", "value"]
	- ["@tanstack/vue-query", "Member[useQueries]", "Argument[0].Member[queries].ArrayElement.Member[queryFn].ReturnValue.Awaited", "ReturnValue.AnyMember.Member[data]", "value"]
	- ["@tanstack/react-query", "Member[useQueries]", "Argument[0].Member[queries].ArrayElement.Member[queryFn].ReturnValue.Awaited", "ReturnValue.AnyMember.Member[data]", "value"]

These should all be value steps. If you want to test the difference, you could add a test where the queryFn returns { foo: fetch(...) }, that is, where the taint is wrapped in an object. Then it would only work with value steps.

Also could you perhaps move the @tanstack/react-query model into this file while we're at it? Just for consistency.

[Napalys]

So, is taint a subset of value? Is it significantly more expensive, or could one just always use value instead?

[asgerf]

value should be used if the value is preserved; taint should be used if the value changed.

taint is mainly used to model string manipulation, where the resulting value is not exactly equal to the original.