chadtmiller.com / slices-teal-relay
Demo using Slices Network GraphQL Relay API to make a teal.fm client
Star 17
Fork 1
Watch
TypeScript 99%
JavaScript <1%
HTML <1%
CSS <1%
17 1 0
src
.gitignore
deno.lock
eslint.config.js
index.html
package.json
postcss.config.js
README.md
relay.config.json
schema.graphql
tsconfig.app.json
tsconfig.json
tsconfig.node.json
vite.config.ts
README.md

Slices Teal Relay Demo #

A teal.fm timeline built with React, Relay, and Tailwind CSS. Displays music plays from the Slices GraphQL API.

Live Demo: https://slices-teal-relay.bigmoves.deno.net/

Features #

  • Real-time music scrobble feed
  • User profiles with listening history
  • Album artwork from MusicBrainz
  • Infinite scroll pagination
  • Dark mode UI inspired by Last.fm
  • Powered by Relay for efficient GraphQL data management

Tech Stack #

  • React - UI framework
  • Relay - GraphQL client with automatic cache management
  • React Router - Client-side routing
  • Tailwind CSS - Styling
  • Vite - Build tool
  • TypeScript - Type safety

Prerequisites #

  • Node.js 18+ or Deno
  • npm or pnpm

Getting Started #

  1. Install dependencies

    npm install

  2. Fetch the GraphQL schema

    npm run schema:prod

  3. Generate Relay types

    npx relay-compiler

  4. Start the development server

    npm run dev

    The app will be available at http://localhost:5173

Development #

Updating the GraphQL Schema #

The project connects to the Slices API. To update the schema:

npm run schema:prod
npx relay-compiler

Project Structure #

src/
├── App.tsx                 # Main feed component
├── Profile.tsx            # User profile page
├── TrackItem.tsx          # Individual track card component
├── LoadingFallback.tsx    # Loading skeleton
├── useAlbumArt.ts        # Hook to fetch album art from MusicBrainz
└── __generated__/        # Relay-generated TypeScript types

Working with Relay #

This project uses Relay's modern API with:

  • useLazyLoadQuery - Load data on component mount
  • usePaginationFragment - Infinite scroll pagination with automatic cache updates
  • useFragment - Fragment composition for data colocation
  • @connection directive - Automatic list merging for pagination

After modifying any GraphQL queries or fragments, run:

npx relay-compiler

Environment #

The app connects to:

  • Production API: https://api.slices.network/graphql
  • Slice: at://did:plc:fpruhuo22xkm5o7ttr2ktxdo/network.slices.slice/3m257yljpbg2a

Scripts #

  • npm run dev - Start development server
  • npm run build - Build for production
  • npm run preview - Preview production build
  • npm run lint - Run ESLint
  • npm run schema:prod - Fetch GraphQL schema from production API

Features in Detail #

Album Artwork #

The app fetches album artwork from MusicBrainz using the releaseMbId field. The fetch happens asynchronously per track and displays when available.

Infinite Scroll #

Both the main feed and profile pages use Relay's usePaginationFragment for efficient infinite scrolling with automatic cache management.

Routing #

  • / - Main feed
  • /tracks - Top tracks
  • /albums - Top albums
  • /profile/:handle - User profile page

License #

MIT