TanStack•2y ago•

16 replies

brilliant-lime

How to use additive context?

I have an app that moves linearly from screen to screen. I want to accumulate a little bit of data on each screen and submit a payload at the end comprised of the merged bits I fetched on each of the previous screens.
This is my simplified route structure.

|-- routes
|   |-- load-todo
|       |-- index.tsx
|       |-- show-todo
|           |-- index.tsx

|-- routes
|   |-- load-todo
|       |-- index.tsx
|       |-- show-todo
|           |-- index.tsx

There are a few places in the docs that say something similar to this (emphasis mine)

🧠 Context is a powerful tool for dependency injection. You can use it to inject services, hooks, and other objects into your router and routes. _You can also additively pass data down the route tree at every route using a route's beforeLoad option._

🧠 Context is a powerful tool for dependency injection. You can use it to inject services, hooks, and other objects into your router and routes. _You can also additively pass data down the route tree at every route using a route's beforeLoad option._

Maybe I'm reading this wrong but it sounds like it's saying if I pass something into the

beforeLoad

beforeLoad

callback in the

load-todo/index.tsx

load-todo/index.tsx

createFileRoute

createFileRoute

call it should be available everywhere down the tree but I only see the type getting returned from

beforeLoad

beforeLoad

merged to the

context

context

object within

load-todo/index.tsx

load-todo/index.tsx

itself, not

show-todo/index.tsx

show-todo/index.tsx

.

If I'm making the wrong assumption about how this is meant to work then is there a better way to accumulate type-safe state as i traverse down the tree? My other idea is to accumulate the state in search params validating that accumulated state as I traverse using Zod's composition options.

Here's a link to a Codesandbox demonstrating a simplified version of what I'm trying to do:
https://codesandbox.io/p/github/trevorfehrman/tanstack-router-example/main?import=true

Thanks in advance for any insight anyone might have, I've searched through the questions here and on GitHub but wasn't able to find an answer : /

TanStack•2y ago•

16 replies

brilliant-lime

How to use additive context?

|-- routes
|   |-- load-todo
|       |-- index.tsx
|       |-- show-todo
|           |-- index.tsx

|-- routes
|   |-- load-todo
|       |-- index.tsx
|       |-- show-todo
|           |-- index.tsx

There are a few places in the docs that say something similar to this (emphasis mine)

🧠 Context is a powerful tool for dependency injection. You can use it to inject services, hooks, and other objects into your router and routes. _You can also additively pass data down the route tree at every route using a route's beforeLoad option._

🧠 Context is a powerful tool for dependency injection. You can use it to inject services, hooks, and other objects into your router and routes. _You can also additively pass data down the route tree at every route using a route's beforeLoad option._

Maybe I'm reading this wrong but it sounds like it's saying if I pass something into the

beforeLoad

beforeLoad

callback in the

load-todo/index.tsx

load-todo/index.tsx

createFileRoute

createFileRoute

call it should be available everywhere down the tree but I only see the type getting returned from

beforeLoad

beforeLoad

merged to the

context

context

object within

load-todo/index.tsx

load-todo/index.tsx

itself, not

show-todo/index.tsx

show-todo/index.tsx

How to use additive context?

Similar Threads

How to use additive context?

Similar Threads

Similar Threads

Similar Threads