indexx.dev
forked from
chadtmiller.com/slices-teal-relay
Teal.fm frontend powered by slices.network
tealfm-slices.wisp.place
tealfm
slices
1import { StrictMode, Suspense } from "react";
2import { createRoot } from "react-dom/client";
3import { BrowserRouter, Routes, Route } from "react-router-dom";
4import "./index.css";
5import App from "./App.tsx";
6import Profile from "./Profile.tsx";
7import LoadingFallback from "./LoadingFallback.tsx";
8import { RelayEnvironmentProvider } from "react-relay";
9import { Environment, Network, type FetchFunction } from "relay-runtime";
10
11const HTTP_ENDPOINT =
12 "https://api.slices.network/graphql?slice=at://did:plc:fpruhuo22xkm5o7ttr2ktxdo/network.slices.slice/3m257yljpbg2a";
13
14const fetchGraphQL: FetchFunction = async (request, variables) => {
15 const resp = await fetch(HTTP_ENDPOINT, {
16 method: "POST",
17 headers: { "Content-Type": "application/json" },
18 body: JSON.stringify({ query: request.text, variables }),
19 });
20 if (!resp.ok) {
21 throw new Error("Response failed.");
22 }
23 return await resp.json();
24};
25
26const environment = new Environment({
27 network: Network.create(fetchGraphQL),
28});
29
30createRoot(document.getElementById("root")!).render(
31 <StrictMode>
32 <BrowserRouter>
33 <RelayEnvironmentProvider environment={environment}>
34 <Suspense fallback={<LoadingFallback />}>
35 <Routes>
36 <Route path="/" element={<App />} />
37 <Route path="/profile/:handle" element={<Profile />} />
38 </Routes>
39 </Suspense>
40 </RelayEnvironmentProvider>
41 </BrowserRouter>
42 </StrictMode>
43);