Demonstration bridge between ATproto and GraphQL. Generate schema types and interface with the ATmosphere via GraphQL queries. Includes a TypeScript server with IDE.
2
fork

Configure Feed

Select the types of activity you want to include in your feed.

feat: list queries you launched server with

Tim Ryan b132bbc6 f219e8dc

+79 -37
+74 -37
public/index.html
··· 1 - <!DOCTYPE html> 1 + <!doctype html> 2 2 <html lang="en"> 3 - <body> 4 - <h1>ATproto <=> GraphQL Demo</h1> 5 - <p>This is an example GraphQL Server with ATproto.</p> 6 - <ul> 3 + <body> 4 + <h1>ATproto <=> GraphQL Demo</h1> 5 + <p>This is an example GraphQL Server with ATproto.</p> 6 + <ul> 7 7 <li><a href="/graphiql">Interactive GraphQL IDE (GraphiQL)</a></li> 8 8 <li><a href="/graphql">GraphQL endpoint</a></li> 9 - </ul> 10 - <p>You are currently serving these procedures:</p> 11 - <ul> 12 - <li>TODO</li> 13 - </ul> 14 - </body> 15 - <head> 16 - <meta charset="UTF-8"> 17 - <meta name="viewport" content="width=device-width, initial-scale=1.0"> 18 - <title>Static Page</title> 19 - <style> 20 - body { 21 - background-color: #121212; 22 - color: #e0e0e0; 23 - font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 24 - margin: 0; 25 - padding: 2rem; 26 - line-height: 1.6; 27 - } 28 - h1 { 29 - font-size: 2.5rem; 30 - margin-bottom: 1rem; 31 - color: #ffffff; 32 - } 33 - p { 34 - font-size: 1.2rem; 35 - } 36 - a:visited { 37 - color: #4aa; 38 - } 39 - </style> 40 - </head> 9 + </ul> 10 + <p>You have imported these queries:</p> 11 + <ul id="procedures"> 12 + <li><i>loading...</i></li> 13 + </ul> 14 + <script> 15 + // Load and render lexicon list 16 + document.addEventListener("DOMContentLoaded", function () { 17 + const proceduresList = document.getElementById("procedures"); 18 + const loadingItem = proceduresList.querySelector("li"); 19 + 20 + fetch("/lexicons") 21 + .then((response) => { 22 + if (!response.ok) { 23 + throw new Error("Network response was not ok"); 24 + } 25 + return response.json(); 26 + }) 27 + .then((data) => { 28 + // Clear loading message 29 + proceduresList.innerHTML = ""; 30 + 31 + console.error(data); 32 + 33 + // Add each lexicon as a list item 34 + data.forEach((lexicon) => { 35 + const listItem = document.createElement("li"); 36 + listItem.style.fontFamily = "monospace"; 37 + listItem.style.fontSize = "1.2em"; 38 + listItem.textContent = lexicon; 39 + proceduresList.appendChild(listItem); 40 + }); 41 + }) 42 + .catch((error) => { 43 + console.error("Error fetching lexicons:", error); 44 + loadingItem.textContent = "Failed to load lexicons"; 45 + }); 46 + }); 47 + </script> 48 + </body> 49 + <head> 50 + <meta charset="UTF-8" /> 51 + <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 52 + <title>Static Page</title> 53 + <style> 54 + body { 55 + background-color: #002222; 56 + color: #e0e0e0; 57 + font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; 58 + margin: 0; 59 + padding: 2rem; 60 + line-height: 1.6; 61 + } 62 + h1 { 63 + font-size: 2.5rem; 64 + margin-bottom: 1rem; 65 + color: #ffffff; 66 + } 67 + p { 68 + font-size: 1.2rem; 69 + } 70 + a { 71 + color: #0aa; 72 + } 73 + a:visited { 74 + color: #4dd; 75 + } 76 + </style> 77 + </head> 41 78 </html>
+5
src/bin/server.js
··· 43 43 44 44 app.use(express.static("public")); 45 45 46 + // Serve lexicons.json at /lexicons path 47 + app.get("/lexicons", (req, res) => { 48 + res.json(Object.keys(lexiconCalls)); 49 + }); 50 + 46 51 const handler = createHandler({ schema }); 47 52 48 53 // GraphQL endpoint