Comments (9)
https://stackblitz.com/github/ardeora/solid-start-query-bug-repo
Could I get an isolated example with solid query that does double refetch? In this example above you can see that the request doesnt fire on client unless you switch tabs
https://github.com/OrJDev/solid-query-bug
here is a video of it actually broken.
2024-03-16.12-35-53.mp4
so in the video you can see that it calls the function on both client & server, causing it to render the wrong number, even tho i just opened the page and i disabled refetchOnWindowFocus.
from create-jd-app.
The trpc resolver is getting double-fetched, once on the server during SSR and once on client hydration.
Steps to reproduce:
- update
src/server/trpc/router/example.ts
to:hello: procedure.input(z.object({ name: z.string() })).query(({ input }) => { const num = Math.random(); console.log("hi", num); return `Hello ${input.name} ${num}`; }),
run the app
observe the SSR random number being displayed on page load and getting changed after a split-second.
Might be a tanstack query problem (their start example works properly, but is a couple start versions behind and updating it yields errors, so I gave up)
I think its under tanstack query because i remember facing this issue on trpc so i went back and checked what happens if i just run a query regardless of trpc, it still ran it twice. How about crate a new app and instead of using trpc just use createQuery and see if its being ran twice. If so an issue should be opened under tanstack query
from create-jd-app.
The trpc resolver is getting double-fetched, once on the server during SSR and once on client hydration.
Steps to reproduce:
- update
src/server/trpc/router/example.ts
to:hello: procedure.input(z.object({ name: z.string() })).query(({ input }) => { const num = Math.random(); console.log("hi", num); return `Hello ${input.name} ${num}`; }),
run the app
observe the SSR random number being displayed on page load and getting changed after a split-second.
Might be a tanstack query problem (their start example works properly, but is a couple start versions behind and updating it yields errors, so I gave up)
I think its under tanstack query because i remember facing this issue on trpc so i went back and checked what happens if i just run a query regardless of trpc, it still ran it twice. How about crate a new app and instead of using trpc just use createQuery and see if its being ran twice. If so an issue should be opened under tanstack query
So basically at the index page instead of calling .myRouter.query.createQuery()
Change it to
createQuery(() => ({ queryKey, queryFn))
Directly from solid query.
from create-jd-app.
yep so from what i tested even with a simple query like:
const hello = createQuery(() => ({
queryKey: ["test"],
queryFn: async () => {
console.log("called");
const arn = Math.floor(Math.random() * 100);
console.log({ arn });
return `Hello ${arn}`;
},
refetchOnWindowFocus: false,
}));
it is being fetched twice, once on client and once on server (first reload is ssr and second on client is because this function isn't server function). it should have rendered on the page 6
but it rendered 31
because it made another call on the client.
![Screenshot 2024-03-13 at 12 31 05](https://private-user-images.githubusercontent.com/91349014/312416902-f082e8c7-04d7-4871-8000-34b60bbbc6ad.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MTQ3NzY2ODYsIm5iZiI6MTcxNDc3NjM4NiwicGF0aCI6Ii85MTM0OTAxNC8zMTI0MTY5MDItZjA4MmU4YzctMDRkNy00ODcxLTgwMDAtMzRiNjBiYmJjNmFkLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA1MDMlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwNTAzVDIyNDYyNlomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTJlN2RiOWRhNWNjNWNiYjYzOWRkY2QxODI0N2JjOWM1YjlmZWVmOTMzMzUyMzQwNDNjYWJmZDkyMDk5MWUyMDQmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.xBXYevk5QwkzjILpf0PE1lNNMQfajZfLerIg35KnPjE)
![Screenshot 2024-03-13 at 12 31 27](https://private-user-images.githubusercontent.com/91349014/312416981-d63231d7-1f03-4a36-b806-b9fc9b49bada.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MTQ3NzY2ODYsIm5iZiI6MTcxNDc3NjM4NiwicGF0aCI6Ii85MTM0OTAxNC8zMTI0MTY5ODEtZDYzMjMxZDctMWYwMy00YTM2LWI4MDYtYjlmYzliNDliYWRhLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA1MDMlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwNTAzVDIyNDYyNlomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTM0Y2Y1OGMyOWNjMDIzMjA2ZDNmNGZlMzQxZWI4NGNjYjZmNWRmNzk1YjFiZWQwZDgxOTQ0OTBkMzQ3YzRkNDgmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.o722jirsyEqEZBHwOFVVGkakQas2XNVCMF7Sivfi2h8)
from create-jd-app.
cc @ardeora
"dependencies": {
"@solidjs/router": "^0.13.0",
"@solidjs/start": "^0.7.4",
"solid-js": "^1.8.15",
"vinxi": "^0.3.10",
"@solidjs/meta": "^0.29.3",
"@solid-mediakit/trpc": "^3.0.0",
"@tanstack/solid-query": "^5.27.5",
"@trpc/client": "^10.45.1",
"@trpc/server": "^10.45.1",
"zod": "^3.22.4"
},
from create-jd-app.
so basically the main issue here is not the hydration is that solid query makes 2 requests instead of 1 for some reason.
from create-jd-app.
https://stackblitz.com/github/ardeora/solid-start-query-bug-repo
Could I get an isolated example with solid query that does double refetch? In this example above you can see that the request doesnt fire on client unless you switch tabs
from create-jd-app.
Should be fixed in v5.28.5+ https://stackblitz.com/edit/github-fg2nmx?file=src%2Froutes%2Findex.tsx
from create-jd-app.
@shiro according to Aryan this is fixed
please try and re-open this issue if you still face this bug.
from create-jd-app.
Related Issues (20)
- trpc query options works not as expected 🧐 HOT 1
- Resolutions Errors HOT 2
- npm install error HOT 2
- [Question] Using within createServerData$ HOT 1
- When generating TRPC app, it uses a dependency that is not open-source (source available anywhere) HOT 2
- Not working in Mono/Turborepo HOT 1
- Uncaught ReferenceError: global is not defined HOT 1
- TypeError: __vite_ssr_import_0__.SolidAuth is not a function HOT 5
- query client should not be shared between requests HOT 2
- Broken CLI HOT 1
- Unexpected token < in JSON at position 0 HOT 1
- AuthJs on Cloudflare Workers HOT 2
- Error: "route.outlet is not a function" on creating a new jd app HOT 2
- route.outlet is not a function HOT 2
- Application not starting HOT 1
- No QueryClient set, use QueryClientProvider when using tRPC in server action HOT 1
- Latest Version of Tanstack Solid Query Breaking CreateJD HOT 5
- Private procedures throwing unauthorized issue HOT 3
- Can't import serverEnv from anything imported client-side (e.g. Co-located PRPC query + resolver) HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from create-jd-app.