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

Using data utility function breaks useLoaderData types #10339

Open
asgeo1 opened this issue Dec 16, 2024 · 1 comment
Open

Using data utility function breaks useLoaderData types #10339

asgeo1 opened this issue Dec 16, 2024 · 1 comment

Comments

@asgeo1
Copy link

asgeo1 commented Dec 16, 2024

Reproduction

Type safety seems messed up when returning data utility function from action/loader.

export const loader = async ({ request }: LoaderFunctionArgs) => {
  ...
  return data(mapped, {
    headers: {
      'Cache-Control': 'max-age=900, s-maxage=900, stale-while-revalidate=31536000'
    }
  })
}

export const VideosListPage = () => {
  const data = useLoaderData<typeof loader>()
  console.log(data[0]?.title)
  ...
}
image

Basically if you return data() from loader/action, the type of const data = useLoaderData<typeof loader>() will incorrectly be of DataWithResponseInit.

The typescript LSP will suggest properties like .data etc are available, but they don't work as that's not actually what is returned.

Searching this repo, there are other similar issues, but they are marked as closed/fixed. Which doesn't make sense, as the issue is definitely not fixed.

System Info

System:
    OS: macOS 15.2
    CPU: (10) arm64 Apple M1 Max
    Memory: 1.76 GB / 64.00 GB
    Shell: 3.7.1 - /opt/homebrew/bin/fish
  Binaries:
    Node: 22.11.0 - ~/.nodenv/versions/22.11.0/bin/node
    npm: 10.9.0 - ~/.nodenv/versions/22.11.0/bin/npm
    Watchman: 2024.12.02.00 - /opt/homebrew/bin/watchman
  Browsers:
    Brave Browser: 130.1.71.121
    Chrome: 131.0.6778.140
    Edge: 131.0.2903.99
    Safari: 18.2
  npmPackages:
    @remix-run/dev: ^2.15.1 => 2.15.1
    @remix-run/eslint-config: ^2.15.1 => 2.15.1
    @remix-run/node: ^2.15.1 => 2.15.1
    @remix-run/react: ^2.15.1 => 2.15.1
    @remix-run/route-config: ^2.15.1 => 2.15.1
    @remix-run/serve: ^2.15.1 => 2.15.1
    vite: ^5.1.0 => 5.4.8

Used Package Manager

npm

Expected Behavior

Types should be returned correctly

Actual Behavior

Types returned incorrectly

@bravo-kernel
Copy link
Contributor

Confirmed as not fixed when using remix 2.15.0 and v3 future flag for single fetch.

Solution is provided here #9826 (comment)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants