kmoskwiak / usesse Goto Github PK

<A>
   <B></B>
</A>

A :

const [dataA, error] = useSSE(() => {
    return fetch("https://myapi.example.com").then((res) => res.json());
  }, []);

B:

const [dataB, error] = useSSE(() => {
    return fetch("https://myapi.example.com", {params: dataA.id}).then((res) => res.json());
  }, []);

query need dataA , how handle this condition ?

createBroswerContext should be createBrowserContext.

I'm not sure, maybe I'm doing something wrong, but I've used useSSE hook twice in my app, and now data object unpredictably has my requests results in different order and components receive wrong data.

Judging by the code, the requests are simply inserted in the array as they come, and my code renders asynchronously, so the order of request calls is undetermined.

I've found this repo through this article, and there results are kept by keywords. Is there a reason this idea was abandoned? I'd be more than happy to support each request with some data key, it would be almost like using redux.

Support new React 18 features:

• lazy loading on server side,
• new hydration API and concurrent rendering.

Hi, first of all, thank you for the repo!

Secondly, I tried to use the repo with Razzle SSR. The server part works correctly but I have issue on frontend part. The components with useSSE seems to render correctly, but they rerender again while FE init so there is visible blinking (the API call from useSSE is fired again on FE, trying to reach the same data that are already rendered by server). Are you aware of this, is it a known issue?

Thanks a lot

hi,

what hasresolveDatadone ?

i have followed your samples, but got [ null, null ]

// server/index.ts

    await resolveData(3000);

    const markup = renderToString(
      <ServerDataContext>
        <App />
      </ServerDataContext>,
    );

    let html = fileContent.replace(/\<!-- injected-data --\>/g, data.toHtml());
    if (data) {
      html.replace('<div id="root" />', `<div id="root">${markup}</div>`);
    }
    res.send(html);

// client/index.ts

  <BroswerDataContext>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </BroswerDataContext>

// App.tsx

  const data = useSSE(() => api.getPopularRepos('chinese').then((res) => res.json()), []);

  console.log(data, 111);

// here i expected to got a array data,but

i got expected data in client side, but got [null, null], 111 in server side

i don't know why, ty

So I have configured a NextJS parent application to use useSSE and it works well with components developed inside the NextJS application. However, I have created component based architecture where I publish a separate React Library project on npm and import those components inside my main NextJS application. These react library components are using useSSE to fetch data. But when I import these react components inside my NextJS parent application, it just fetches the promises and does not resolve the data. I have used the example Todos component demonstrated in this repository to validate the flow. When this Todos component was developed within the NextJS app, it was SSR ready and resolved the data correctly. When I moved this component to my React library, and imported the same from the package instead, I am starting to face this issue. Please help and guide

key param is unnecessary and may lead to problems with data overwriting in global context.

This is how useSSE should be invoked:

useSSE(
    {},
    () => { return new Promise((resolve) => {}); },
    []
  );