search

brillout / telefunc

Remote Functions. Instead of API.
https://telefunc.com
MIT License
688 stars 31 forks source link

Is it possible to useContext while using vike stream to render? renderPage doesn't seem to allow passing context object to telefunc #107

Closed pencilcheck closed 7 months ago

pencilcheck commented 7 months ago

I am using vike and telefunc. The server is setup to use vike/streaming. Right now I am trying to access context from telefunc but it seems like vike on SSR calls telefunc (inside renderPage function) but without going through the usual _telefunc route thus it keeps erroring out saying that context is used wrong as context isn't set.

But there is no way to set the context object from vike renderPage function. What can I do to make context work with SSR and vike streaming?

Or if there is a way to at least set a default context object so it doesn't error out

Error stacktrace

Error: [telefunc@0.1.62][Wrong Usage][getContext()] Make sure to provide a context object, see https://telefunc.com/getContext#provide
    at Object.getContext_sync [as getContext] (/Users/pencilcheck/Projects/vite-stack/project-app/node_modules/.pnpm/telefunc@0.1.62_@babel+core@7.23.2_react-streaming@0.3.15_react@18.2.0/node_modules/telefunc/dist/cjs/node/server/getContext/sync.js:19:37)
    at Proxy.getContext (/Users/pencilcheck/Projects/vite-stack/project-app/node_modules/.pnpm/telefunc@0.1.62_@babel+core@7.23.2_react-streaming@0.3.15_react@18.2.0/node_modules/telefunc/dist/cjs/node/server/getContext.js:13:34)
    at loadPartialMergedCount (/Users/pencilcheck/Projects/vite-stack/project-app/pages/tabs/tab/GenPopRetentionPersonsFocusedRefresh.telefunc.ts:130:49)
    at asyncFn (/Users/pencilcheck/Projects/vite-stack/project-app/node_modules/.pnpm/telefunc@0.1.62_@babel+core@7.23.2_react-streaming@0.3.15_react@18.2.0/node_modules/telefunc/dist/cjs/shared/react-streaming/useData.js:12:16)
    at resolver (/Users/pencilcheck/Projects/vite-stack/project-app/node_modules/.pnpm/react-streaming@0.3.15_react-dom@18.2.0_react@18.2.0/node_modules/react-streaming/dist/cjs/server/useAsync.js:19:29)
    at useSuspense (/Users/pencilcheck/Projects/vite-stack/project-app/node_modules/.pnpm/react-streaming@0.3.15_react-dom@18.2.0_react@18.2.0/node_modules/react-streaming/dist/cjs/shared/useSuspense.js:71:23)
    at useAsync (/Users/pencilcheck/Projects/vite-stack/project-app/node_modules/.pnpm/react-streaming@0.3.15_react-dom@18.2.0_react@18.2.0/node_modules/react-streaming/dist/cjs/server/useAsync.js:25:42)
    at useData (/Users/pencilcheck/Projects/vite-stack/project-app/node_modules/.pnpm/telefunc@0.1.62_@babel+core@7.23.2_react-streaming@0.3.15_react@18.2.0/node_modules/telefunc/dist/cjs/shared/react-streaming/useData.js:15:51)
    at Proxy.useData (/Users/pencilcheck/Projects/vite-stack/project-app/node_modules/.pnpm/telefunc@0.1.62_@babel+core@7.23.2_react-streaming@0.3.15_react@18.2.0/node_modules/telefunc/dist/cjs/node/react-streaming/useData.js:12:42)
    at Module.useQuery [as default] (/Users/pencilcheck/Projects/vite-stack/project-app/hooks/useQuery.ts:8:41)
    at useBigNumber (/Users/pencilcheck/Projects/vite-stack/project-app/pages/tabs/tab/GenPopRetentionPersonsFocusedMerged.tsx:141:145)
    at BigNumbers (/Users/pencilcheck/Projects/vite-stack/project-app/pages/tabs/tab/common/TabComponents.tsx:447:7)
    at renderWithHooks (/Users/pencilcheck/Projects/vite-stack/project-app/node_modules/.pnpm/react-dom@18.2.0_react@18.2.0/node_modules/react-dom/cjs/react-dom-server.node.development.js:5724:16)
    at renderIndeterminateComponent (/Users/pencilcheck/Projects/vite-stack/project-app/node_modules/.pnpm/react-dom@18.2.0_react@18.2.0/node_modules/react-dom/cjs/react-dom-server.node.development.js:5797:15)
    at renderElement (/Users/pencilcheck/Projects/vite-stack/project-app/node_modules/.pnpm/react-dom@18.2.0_react@18.2.0/node_modules/react-dom/cjs/react-dom-server.node.development.js:6012:7)
    at renderNodeDestructiveImpl (/Users/pencilcheck/Projects/vite-stack/project-app/node_modules/.pnpm/react-dom@18.2.0_react@18.2.0/node_modules/react-dom/cjs/react-dom-server.node.development.js:6170:11)
    at renderNodeDestructive (/Users/pencilcheck/Projects/vite-stack/project-app/node_modules/.pnpm/react-dom@18.2.0_react@18.2.0/node_modules/react-dom/cjs/react-dom-server.node.development.js:6142:14)
    at renderContextProvider (/Users/pencilcheck/Projects/vite-stack/project-app/node_modules/.pnpm/react-dom@18.2.0_react@18.2.0/node_modules/react-dom/cjs/react-dom-server.node.development.js:5986:3)
    at renderElement (/Users/pencilcheck/Projects/vite-stack/project-app/node_modules/.pnpm/react-dom@18.2.0_react@18.2.0/node_modules/react-dom/cjs/react-dom-server.node.development.js:6083:11)
    at renderNodeDestructiveImpl (/Users/pencilcheck/Projects/vite-stack/project-app/node_modules/.pnpm/react-dom@18.2.0_react@18.2.0/node_modules/react-dom/cjs/react-dom-server.node.development.js:6170:11)
brillout commented 7 months ago

I'm not sure I understand your setup, which seems unusual.

vike on SSR calls telefunc (inside renderPage function)

That isn't the case. Vike doesn't know anything about Telefunc.

Can you publish a reproduction?

Closing because so far it doesn't seem a Telefunc bug.

pencilcheck commented 7 months ago

If it is not possible, how can I avoid this error? During SSR how do I prevent telefunc from being called?

brillout commented 7 months ago

If it is not possible, how can I avoid this error? During SSR how do I prevent telefunc from being called?

I think the best would be a reproduction.

pencilcheck commented 7 months ago

If it is not possible, how can I avoid this error? During SSR how do I prevent telefunc from being called?

I think the best would be a reproduction.

ok. here is the reproduction.

bug-app.zip

Just run pnpm install && pnpm dev and load the index

brillout commented 7 months ago

As a GitHub repo.

brillout commented 7 months ago

And, ideally, a minimal reproduction.

pencilcheck commented 7 months ago

As a GitHub repo.

Sure, I can but isn't this fast as well? you can simply download it right away, extract and try it out... If you download the code you will see it is minimal.

pencilcheck commented 7 months ago

https://github.com/pencilcheck/bug-telefunc-app

I am not a developer and maintainer of telefunc nor vike, I tried my best to make it minimal based on what I understand is going on.

brillout commented 7 months ago

Hm, actually, a truly minimal one would be the best here.

Use https://batijs.dev/ to scaffold a minimal app and then apply the reproduction as a single commit. That's the easiest for me as I'll likely see the (I assume user-land) issue right away by reading that commit. (I understand it's annoying for you but I've a lot on my plate so it's crucial I increase my efficiency.)

pencilcheck commented 7 months ago

Hm, actually, a truly minimal one would be the best here.

Use https://batijs.dev/ to scaffold a minimal app and then apply the reproduction as a single commit. That's the easiest for me as I'll likely see the (I assume user-land) issue right away by reading that commit. (I understand it's annoying for you but I've a lot on my plate so it's crucial I increase my efficiency.)

I really tried my best, referenced your examples repo on the website, but the ones that has telefunc is 404: https://github.com/pencilcheck/bug-telefunc-streaming-app

Updated @brillout Thanks.

brillout commented 7 months ago

This is very far from minimal: https://github.com/pencilcheck/bug-telefunc-streaming-app/blob/main/package.json

referenced your examples repo on the website, but the ones that has telefunc is 404

Which page has 404 links?

pencilcheck commented 7 months ago

This is very far from minimal: https://github.com/pencilcheck/bug-telefunc-streaming-app/blob/main/package.json

referenced your examples repo on the website, but the ones that has telefunc is 404

Which page has 404 links?

https://github.com/pyrossh/react-streaming-tigris

from

https://vike.dev/streaming

React 18 + react-streaming + Telefunc + TigrisDB + Blueprint: GitHub > pyrossh/react-streaming-tigris

pencilcheck commented 7 months ago

This is very far from minimal: https://github.com/pencilcheck/bug-telefunc-streaming-app/blob/main/package.json

referenced your examples repo on the website, but the ones that has telefunc is 404

Which page has 404 links?

ok, I have trimmed the package.json

brillout commented 7 months ago

If the changes would habe been summarized as a commit, I would have seen that.

On Sun 14. Apr 2024 at 10:29, Penn Su @.***> wrote:

This is very far from minimal: https://github.com/pencilcheck/bug-telefunc-streaming-app/blob/main/package.json

referenced your examples repo on the website, but the ones that has telefunc is 404

Which page has 404 links?

Oh, so package.json is where you determine if it is minimal or not? Sorry about that, I trim everything I just didn't trim the package.json. While i'm doing it for you, if you can read the other changes it shoudl be faster since there are not a lot of file change.

— Reply to this email directly, view it on GitHub https://github.com/brillout/telefunc/issues/107#issuecomment-2053963888, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAHVQRX66QMIVWPVWCXBGN3Y5I45PAVCNFSM6AAAAABGGBAVEKVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDANJTHE3DGOBYHA . You are receiving this because you were mentioned.Message ID: @.***>

brillout commented 7 months ago

Perfect, thanks.

Actually, it may be a Telefunc bug around useData(). I'll have a look at it later (today / tomorrow). How urgent is this to you? (I'm currently working on a highest-prio Vike feature.)

https://github.com/pyrossh/react-streaming-tigris

Link removed.

brillout commented 7 months ago

Alright, I had a look at this. It isn't really a bug: if you want to use Telefunc for fetching SSR data, then there isn't any straighforward way to provide context. I've a couple of ideas for how to solve this, although it isn't the highest priority right now (although it's fairly top priority).

In general, import { useData } from 'telefunc/react-streaming' isn't documented anywhere for a good reason: it's just an experiment and it isn't production ready (yet). Also, the plan is to have a vike-react-telefunc package to automatically integrate evertyhing.

In the meantime, use Vike's data() hook for SSR data. But let me know if it isn't an option for you.

(FYI I've improved your reproduction at https://github.com/brillout/bug-telefunc-streaming-app.)