extended-yellow

providing an action in file-based routing (createFileRoute)

I am looking at this example - https://tanstack.com/query/v4/docs/framework/react/examples/react-router - which integrates react-query with the tanstack router, using actions and and loaders. However, using file-based routing, it does not seem like createFileRoute accepts an action (at least the intellisense/TS defs indicates that it doesn't):

Object literal may only specify known properties, and 'action' does not exist in type 'ParamsOptions<"/todo", Record<never, string>> ...

Object literal may only specify known properties, and 'action' does not exist in type 'ParamsOptions<"/todo", Record<never, string>> ...

Is this a limitation, or is this supposed to be cinfugred in some other way? Thanks

5 Replies

extended-yellowOP•12mo ago

here's the code in question

export const Route = createFileRoute("/todo")({
  component: () => {
    const todos = Route.useLoaderData()
    return <TodoPage todos={todos} />
  },
  loader: async () => {
    const res = await api.todos.index.get()
    
    if (res.error) {
      return []
    }

    return res.data
  },
  action: () => {
    // ...
  }
})

export const Route = createFileRoute("/todo")({
  component: () => {
    const todos = Route.useLoaderData()
    return <TodoPage todos={todos} />
  },
  loader: async () => {
    const res = await api.todos.index.get()
    
    if (res.error) {
      return []
    }

    return res.data
  },
  action: () => {
    // ...
  }
})

loud-coral•12mo ago

@Alan Smithee the example you mentioned shows how to integrate react-query v4 with React Router v6.4+, not with TanStack Router. That's why you get that TS error on TanStack Router as there is no action API available.

extended-yellowOP•12mo ago

lol that would explain it 🤦 thanks for the help @Rui Saraiva. I guess this is more relevant https://tanstack.com/router/latest/docs/framework/react/examples/basic-react-query are there any other samples/examples you can point to, or guidelines for tanstack router/query synergy? thanks

loud-coral•12mo ago

yes, that example will get you started. the kitchen sink one is more robust.

extended-yellowOP•12mo ago

perfect, thanks a million! 🙏

Gaming

Programming

providing an action in file-based routing (createFileRoute)

Did you find this page helpful?