feat: expose remote function query data to a global variable
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 20.8k
- Forks
- 2.3k
- Avg merge
- 1d 16h
- Merged PRs (30d)
- 156
Description
Describe the problem
In Classic SvelteKit, you can get all page data anywhere in your app through the page variable (previously $page). This is specifically available under page.data for data that is returned.
You cannot do this with a Remote Function query(). The data is NOT available globally, although it can be cached in multiple components.
Imagine this scenario:
- Layout (Breadcrumb) - no await
- Users (await getUserList())
- Jonathan (await getUser())
- Posts (await getPostList())
- My Post 1 (await getPostById(params.id))
- Comment 2 (await getCommentById(params.comment_id))
- My Post 1 (await getPostById(params.id))
- About -- no await
- Users (await getUserList())
And I want to display a simple breadcrumb:
Home -> Users -> Jonathan
Home -> Posts -> SvelteKit Remote Functions Tips
Home -> About
I can set the Breadcrumbs in the +layout.svelte file, BUT I am actually querying the data on the page itself... (username, page title, comment title, or no query at all, etc)
This CAN be solved using +page.server.ts for the query, and setting the crumb data in the +layout.svelte with page.data.
However, this is impossible to work using Remote Function queries.
Describe the proposed solution
Either:
- Expose the query data globally in
page.query... likepage.query.myFunc... - Expose the query data globally in
queryorquery.data... likequery.myFunc...
Alternatives considered
- Use
+page.server.tsinstead ofquery()to set the data usingpage.data... this can mess up your query refreshes etc, since it DOES NOT usequery()and has you revert back to old paradigms. - Use
hooks.server.tsto replace your entire HTML with something like%crumbs%that you query inquery()and set likeevent.locals.query... etc... basically just hack the HTML right before render.
Importance
would make my life easier
Additional Information
Basically I can't use Remote Functions without it, since I have shared data in a layout.
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
The issue names +layout.svelte, +page.server.ts, and hooks.server.ts; start by comparing how page.data and Remote Function query data are used across these entry points. Done means data returned by a query can be accessed by shared layout content such as breadcrumbs through a clearly defined global value, without replacing the query with +page.server.ts.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript
- Domain
- frontend
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Quiet
- Clarity
- Mostly clear
- Newbie friendliness
- 38/100