Relay

For Squiggle Hub frontend, we use Relay.

Compiler

Relay has a compiler. pnpm relay will generate all necessary files (in src/__generated__).

If you use VS Code, you can install Relay GraphQL extension to run the compiler in the background.

Note: sometimes (rarely) the compiler crashes or starts to consume 100% CPU. Restarting VS Code will help.

Fetching the initial page data

There's a common pattern that we use, based on issue-tracker-next-v13 official example:

• page.tsx is an RSC (shouldn't have "use client" pragma)
• page.tsx loads the initial query with loadPageQuery
• page.tsx renders the <SomeNamePage> component with query={query} prop
• <SomeNamePage> component, defined in ./SomeNamePage.tsx, loads the query result through usePageQuery hook
• SomeNamePage.tsx is a client component (should have "use client" pragma)

Other components that are included by SomeNamePage.tsx and are rendered on the first load shouldn't do their own GraphQL queries, but should export GraphQL fragments instead, as recommended by the Relay documentation.

PR for this pattern: #2131.

Example: page.tsx, FrontPage.tsx.