Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Cannot pass an array of tags to cacheTag function #71901

Closed
tomdohnal opened this issue Oct 26, 2024 · 3 comments · Fixed by #71912
Closed

Cannot pass an array of tags to cacheTag function #71901

tomdohnal opened this issue Oct 26, 2024 · 3 comments · Fixed by #71912
Labels
bug Issue was opened via the bug report template. locked TypeScript Related to types with Next.js.

Comments

@tomdohnal
Copy link
Contributor

Link to the code that reproduces this issue

https://codesandbox.io/p/devbox/wizardly-breeze-j63t72?file=%2Fapp%2Fpage.tsx%3A6%2C3-6%2C32

To Reproduce

  1. open the page.tsx file
  2. hover over the line with cacheTag(["tag-1", "tag-2"]);

Current vs. Expected behavior

I expect to be able to pass an array of tags to the cacheTag function (as per the example given in the docs) but I see an error saying: "Argument of type 'string[]' is not assignable to parameter of type 'string'" instead

Provide environment information

Operating System:
  Platform: linux
  Arch: x64
  Version: #1 SMP PREEMPT_DYNAMIC Sun Aug  6 20:05:33 UTC 2023
  Available memory (MB): 4102
  Available CPU cores: 2
Binaries:
  Node: 20.9.0
  npm: 9.8.1
  Yarn: 1.22.19
  pnpm: 8.10.2
Relevant Packages:
  next: 15.0.2-canary.7 // Latest available version is detected (15.0.2-canary.7).
  eslint-config-next: N/A
  react: 19.0.0-rc-1631855f-20241023
  react-dom: 19.0.0-rc-1631855f-20241023
  typescript: 5.3.3
Next.js Config:
  output: N/A

Which area(s) are affected? (Select all that apply)

TypeScript

Which stage(s) are affected? (Select all that apply)

next dev (local)

Additional context

As other places in the docs pass multiple tags as separate arguments (rather than as an array) which is the actual type signature of the cacheTag function, I wonder if it's just the case of the docs being wrong here

@tomdohnal tomdohnal added the bug Issue was opened via the bug report template. label Oct 26, 2024
@github-actions github-actions bot added the TypeScript Related to types with Next.js. label Oct 26, 2024
@wiscaksono
Copy link
Contributor

The documentation example might be misleading. The cacheTag function uses rest parameters (...tags: string[]), so it expects individual string arguments rather than an array. Here's how to fix it:

// ❌ Incorrect - passing array
cacheTag(["tag-1", "tag-2"]);

// ✅ Correct - passing individual strings
cacheTag("tag-1", "tag-2");

The TypeScript signature is:

function cacheTag(...tags: string[]): void

See the type definition here

This means you can pass any number of string arguments, but they need to be passed as separate arguments, not as an array. The rest parameter syntax (...) will automatically collect them into an array internally.
If you have an array of tags that you need to pass, you can spread them:

const tags = ["tag-1", "tag-2"];
cacheTag(...tags);

delbaoliveira added a commit that referenced this issue Oct 29, 2024
<!-- Thanks for opening a PR! Your contribution is much appreciated.
To make sure your PR is handled as smoothly as possible we request that
you follow the checklist sections below.
Choose the right checklist for the change(s) that you're making:
-->

## What?

### Documentation Fix: Correct `cacheTag` Function Usage

**Issue**: The [current
documentation](https://nextjs.org/docs/canary/app/api-reference/functions/cacheTag#notes)
incorrectly states that `cacheTag` accepts an array of tags. However,
the [source
code](https://github.com/vercel/next.js/blob/ca5f29d81b011c3a01e2372118b29836f1df0fa7/packages/next/src/server/use-cache/cache-tag.ts#L4C1-L4C52)
implementation uses rest parameters (`...tags: string[]`), expecting
individual string arguments rather than an array.

**Changes**:
Updated the "Notes" section to reflect the function's correct usage:

## Why?

This change:
1. Aligns with the actual implementation in the source code
2. Prevents TypeScript errors when users follow the documentation
3. Provides clearer guidance on using the function with both direct
arguments and arrays (using the spread operator)

The current documentation might lead developers to encounter the
TypeScript error:
> "Argument of type 'string[]' is not assignable to parameter of type
'string'"

## Related

Fixes #71901

Co-authored-by: Delba de Oliveira <[email protected]>
kdy1 pushed a commit that referenced this issue Oct 30, 2024
<!-- Thanks for opening a PR! Your contribution is much appreciated.
To make sure your PR is handled as smoothly as possible we request that
you follow the checklist sections below.
Choose the right checklist for the change(s) that you're making:
-->

## What?

### Documentation Fix: Correct `cacheTag` Function Usage

**Issue**: The [current
documentation](https://nextjs.org/docs/canary/app/api-reference/functions/cacheTag#notes)
incorrectly states that `cacheTag` accepts an array of tags. However,
the [source
code](https://github.com/vercel/next.js/blob/ca5f29d81b011c3a01e2372118b29836f1df0fa7/packages/next/src/server/use-cache/cache-tag.ts#L4C1-L4C52)
implementation uses rest parameters (`...tags: string[]`), expecting
individual string arguments rather than an array.

**Changes**:
Updated the "Notes" section to reflect the function's correct usage:

## Why?

This change:
1. Aligns with the actual implementation in the source code
2. Prevents TypeScript errors when users follow the documentation
3. Provides clearer guidance on using the function with both direct
arguments and arrays (using the spread operator)

The current documentation might lead developers to encounter the
TypeScript error:
> "Argument of type 'string[]' is not assignable to parameter of type
'string'"

## Related

Fixes #71901

Co-authored-by: Delba de Oliveira <[email protected]>
@delbaoliveira
Copy link
Contributor

Thank you for the PR @wiscaksono 🙏🏼

@delbaoliveira delbaoliveira reopened this Oct 30, 2024
stipsan pushed a commit to sanity-io/next.js that referenced this issue Nov 6, 2024
<!-- Thanks for opening a PR! Your contribution is much appreciated.
To make sure your PR is handled as smoothly as possible we request that
you follow the checklist sections below.
Choose the right checklist for the change(s) that you're making:
-->

## What?

### Documentation Fix: Correct `cacheTag` Function Usage

**Issue**: The [current
documentation](https://nextjs.org/docs/canary/app/api-reference/functions/cacheTag#notes)
incorrectly states that `cacheTag` accepts an array of tags. However,
the [source
code](https://github.com/vercel/next.js/blob/ca5f29d81b011c3a01e2372118b29836f1df0fa7/packages/next/src/server/use-cache/cache-tag.ts#L4C1-L4C52)
implementation uses rest parameters (`...tags: string[]`), expecting
individual string arguments rather than an array.

**Changes**:
Updated the "Notes" section to reflect the function's correct usage:

## Why?

This change:
1. Aligns with the actual implementation in the source code
2. Prevents TypeScript errors when users follow the documentation
3. Provides clearer guidance on using the function with both direct
arguments and arrays (using the spread operator)

The current documentation might lead developers to encounter the
TypeScript error:
> "Argument of type 'string[]' is not assignable to parameter of type
'string'"

## Related

Fixes vercel#71901

Co-authored-by: Delba de Oliveira <[email protected]>
Copy link
Contributor

This closed issue has been automatically locked because it had no new activity for 2 weeks. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.

@github-actions github-actions bot locked as resolved and limited conversation to collaborators Nov 14, 2024
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
bug Issue was opened via the bug report template. locked TypeScript Related to types with Next.js.
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants