repos / starfx

main.tsx

 1import ReactDOM from "react-dom/client";
 2import { createApi, createSchema, createStore, mdw, timer } from "starfx";
 3import { Provider, useCache } from "starfx/react";
 4
 5const [schema, initialState] = createSchema();
 6const store = createStore({ initialState });
 7
 8const api = createApi();
 9// mdw = middleware
10api.use(mdw.api({ schema }));
11api.use(api.routes());
12api.use(mdw.fetch({ baseUrl: "https://api.github.com" }));
13
14const fetchRepo = api.get(
15  "/repos/neurosnap/starfx",
16  { supervisor: timer() },
17  api.cache(),
18);
19
20store.run(api.register);
21
22function App() {
23  return (
24    <Provider schema={schema} store={store}>
25      <Example />
26    </Provider>
27  );
28}
29
30function Example() {
31  const { isLoading, isError, message, data } = useCache(fetchRepo());
32
33  if (isLoading || !data) return "Loading ...";
34
35  if (isError) return `An error has occurred: ${message}`;
36
37  return (
38    <div>
39      <h1>{data.name}</h1>
40      <p>{data.description}</p>
41      <strong>👀 {data.subscribers_count}</strong>{" "}
42      <strong>✨ {data.stargazers_count}</strong>{" "}
43      <strong>🍴 {data.forks_count}</strong>
44    </div>
45  );
46}
47
48const root = document.getElementById("root") as HTMLElement;
49ReactDOM.createRoot(root).render(
50  <Provider schema={schema} store={store}>
51    <App />
52  </Provider>,
53);