[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill-meta-relay-performance":3,"mdc--yoap00-key":40,"related-org-meta-relay-performance":2698,"related-repo-meta-relay-performance":2874},{"slug":4,"name":4,"fn":5,"description":6,"org":7,"tags":12,"stars":29,"repoUrl":30,"updatedAt":31,"license":32,"forks":33,"topics":34,"repo":35,"sourceUrl":38,"mdContent":39},"relay-performance","optimize Relay application performance","Performance best practices for Relay applications. Use when optimizing data fetching, reducing re-renders, configuring caching, or improving time to first meaningful paint. Covers query placement, @defer, pagination, fetch policies, garbage collection, fragment granularity, and server-side filtering. Companion to the relay-best-practices skill which covers correctness and architecture.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},"meta","Meta Open Source","https:\u002F\u002Fpexgzepcugksgbtrxkhf.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Forg-logos\u002Fmeta.png","facebook",[13,17,20,23,26],{"name":14,"slug":15,"type":16},"Performance","performance","tag",{"name":18,"slug":19,"type":16},"React","react",{"name":21,"slug":22,"type":16},"Relay","relay",{"name":24,"slug":25,"type":16},"GraphQL","graphql",{"name":27,"slug":28,"type":16},"Frontend","frontend",18950,"https:\u002F\u002Fgithub.com\u002Ffacebook\u002Frelay","2026-06-10T07:30:28.726513",null,1895,[],{"repoUrl":30,"stars":29,"forks":33,"topics":36,"description":37},[],"Relay is a JavaScript framework for building data-driven React applications.","https:\u002F\u002Fgithub.com\u002Ffacebook\u002Frelay\u002Ftree\u002FHEAD\u002Fskills\u002Frelay-performance","---\nname: relay-performance\ndescription: >-\n  Performance best practices for Relay applications. Use when optimizing data\n  fetching, reducing re-renders, configuring caching, or improving time to first\n  meaningful paint. Covers query placement, @defer, pagination, fetch policies,\n  garbage collection, fragment granularity, and server-side filtering. Companion\n  to the relay-best-practices skill which covers correctness and architecture.\n---\n\n# Relay Performance Best Practices\n\nPerformance-focused guidance for Relay applications. For correctness, naming,\nand architectural patterns, see the `relay-best-practices` skill.\n\nFor detailed API documentation, read the relevant page from `\u003Cllm-docs>\u002F`\n(available in `node_modules\u002Frelay-runtime\u002Fllm-docs\u002F` after v20.1.1).\n\n## One Query Per Screen\n\nEach screen or route should have **one** (or very few) root queries. Relay\ncoalesces all fragment data needs into a single network request per query.\nMultiple root queries on the same screen defeat this optimization — the browser\nmakes multiple parallel requests that each carry redundant overhead (HTTP\nheaders, connection setup, response parsing).\n\n```\nGOOD:                              BAD:\nRoute → 1 query                    Route → 3 queries\n  ├─ Header (fragment)               ├─ Header (query #1)\n  ├─ Content (fragment)               ├─ Content (query #2)\n  └─ Sidebar (fragment)               └─ Sidebar (query #3)\n```\n\n## Preload Before Rendering the Root\n\nFetch the initial query **before** calling `createRoot().render()`. This\noverlaps the network request with React's initialization, minimizing time to\nfirst meaningful paint.\n\n```tsx\n\u002F\u002F Start fetch immediately — before React even initializes\nconst queryRef = loadQuery(environment, AppQuery, initialVariables);\n\n\u002F\u002F Then render — data may already be available\nconst root = createRoot(document.getElementById('root'));\nroot.render(\n  \u003CRelayEnvironmentProvider environment={environment}>\n    \u003CSuspense fallback={\u003CAppSkeleton \u002F>}>\n      \u003CApp queryRef={queryRef} \u002F>\n    \u003C\u002FSuspense>\n  \u003C\u002FRelayEnvironmentProvider>\n);\n```\n\n## Use `@defer` for Non-Critical Content\n\nDefer secondary or below-the-fold content so primary UI renders faster.\nRelay streams deferred data progressively via Suspense — the initial response\narrives smaller and the critical path renders sooner.\n\n```graphql\nquery ProfileScreenQuery($id: ID!) {\n  user(id: $id) {\n    ...ProfileHeader_user\n    ...ProfileDetails_user @defer\n    ...ProfileComments_user @defer\n  }\n}\n```\n\n```tsx\nfunction ProfileScreen({ queryRef }) {\n  const data = usePreloadedQuery(ProfileScreenQuery, queryRef);\n\n  return (\n    \u003CScrollView>\n      \u003CProfileHeader user={data.user} \u002F>\n      \u003CSuspense fallback={\u003CDetailsSkeleton \u002F>}>\n        \u003CProfileDetails user={data.user} \u002F>\n      \u003C\u002FSuspense>\n      \u003CSuspense fallback={\u003CCommentsSkeleton \u002F>}>\n        \u003CProfileComments user={data.user} \u002F>\n      \u003C\u002FSuspense>\n    \u003C\u002FScrollView>\n  );\n}\n```\n\nGood candidates for `@defer`:\n- Sidebar content\n- Below-the-fold sections\n- Tabs and accordions not visible on initial load\n- Heavy item details in paginated lists\n\n## Fetch Policies\n\n`store-or-network` (the default) is correct for most cases — it reuses cached\ndata and only hits the network for missing or stale data.\n\n| Policy | When to use |\n|--------|-------------|\n| `store-or-network` | Default. Best balance of speed and freshness. |\n| `store-and-network` | Show cached data immediately, update in background. |\n| `network-only` | Freshness is critical (e.g., after a mutation with wide side effects). |\n| `store-only` | Offline-first or reading data already guaranteed to be in the store. |\n\nReserve `network-only` for rare cases. Overusing it turns Relay into a\nno-cache client and eliminates the benefit of the normalized store.\n\n## Configure Garbage Collection\n\nSet `gcReleaseBufferSize` on the Relay Store to retain recently-used queries\nafter their components unmount. The default is 10. This makes navigating back\nto a previously visited screen instant (data is still in the store) instead of\ntriggering a new network request.\n\n```tsx\nconst store = new Store(new RecordSource(), {\n  gcReleaseBufferSize: 20,\n});\n```\n\nFor apps with many screens or heavy navigation, increase the buffer. For\nmemory-constrained environments (mobile), keep it conservative.\n\n## Filter and Sort on the Server\n\nUse GraphQL field arguments to filter and sort data on the server rather than\nfetching everything and processing in JavaScript.\n\n```tsx\n\u002F\u002F BAD: fetch all tasks, filter on client\nconst data = useFragment(graphql`\n  fragment TaskList_user on User {\n    tasks { id, title, status }\n  }\n`, user);\nconst active = data.tasks.filter(t => t.status === 'ACTIVE');\n\n\u002F\u002F GOOD: filter on server via field argument\nconst data = useFragment(graphql`\n  fragment TaskList_user on User {\n    tasks(status: ACTIVE) { id, title }\n  }\n`, user);\n```\n\nServer-side filtering reduces payload size, avoids unnecessary network\ntransfer, and reduces memory usage on the client.\n\n## Never Fetch Unbounded Collections\n\nAlways paginate list fields using `@connection` + `usePaginationFragment`.\nFetching an entire collection at once risks transferring megabytes of data,\nstalling the UI during normalization, and exhausting device memory.\n\nStart with a page size appropriate for the viewport (e.g., 10–20 items) and\nload more on scroll.\n\n```graphql\n# BAD: fetches every item — unbounded\nfragment NotificationList_user on User {\n  notifications {\n    id\n    message\n  }\n}\n\n# GOOD: paginated with a bounded first page\nfragment NotificationList_user on User\n  @argumentDefinitions(\n    count: { type: \"Int\", defaultValue: 10 }\n    cursor: { type: \"String\" }\n  )\n  @refetchable(queryName: \"NotificationListPaginationQuery\") {\n  notifications(first: $count, after: $cursor)\n    @connection(key: \"NotificationList_notifications\") {\n    edges {\n      node {\n        id\n        message\n      }\n    }\n  }\n}\n```\n\n## Keep Fragments Granular\n\nSplit large fragments into smaller, component-scoped fragments so Relay can\nre-render **only** the components whose data actually changed. A single\nmonolithic fragment shared by many components causes all of them to re-render\nwhen any field in the fragment changes.\n\n```tsx\n\u002F\u002F BAD: one large fragment, all children re-render on any field change\nfunction PostCard({ post }) {\n  const data = useFragment(graphql`\n    fragment PostCard_post on Post {\n      title\n      body\n      author { name, profilePicture { uri } }\n      likeCount\n      commentCount\n    }\n  `, post);\n  return (\n    \u003C>\n      \u003CPostHeader title={data.title} author={data.author} \u002F>\n      \u003CPostBody body={data.body} \u002F>\n      \u003CPostFooter likes={data.likeCount} comments={data.commentCount} \u002F>\n    \u003C\u002F>\n  );\n}\n\n\u002F\u002F GOOD: each child owns its fragment, re-renders independently\nfunction PostHeader({ post }: { post: PostHeader_post$key }) {\n  const data = useFragment(graphql`\n    fragment PostHeader_post on Post {\n      title\n      author { name }\n    }\n  `, post);\n  \u002F\u002F Only re-renders when title or author.name changes\n}\n\nfunction PostFooter({ post }: { post: PostFooter_post$key }) {\n  const data = useFragment(graphql`\n    fragment PostFooter_post on Post {\n      likeCount\n      commentCount\n    }\n  `, post);\n  \u002F\u002F Only re-renders when like\u002Fcomment counts change\n}\n```\n\n## One Connection Per Component\n\nUse a single `usePaginationFragment` per component. Multiple connections in\none component make pagination state harder to reason about — cursor tracking,\nloading states, and `hasNext` flags become tangled. Split each connection into\nits own component instead.\n\n## Avoid Unnecessary Refetches\n\nAfter a mutation, let Relay's normalized store auto-update components by\nspreading relevant fragments in the mutation response. Do not call `refetch()`\nor `fetchQuery()` when the store update is sufficient.\n\n```graphql\n# GOOD: updated data comes back with the mutation response\nmutation UpdateUserMutation($input: UpdateUserInput!) {\n  updateUser(input: $input) {\n    user {\n      ...UserProfile_user\n      ...UserAvatar_user\n    }\n  }\n}\n\n# BAD: requires a separate round-trip after mutation\nmutation UpdateUserMutation($input: UpdateUserInput!) {\n  updateUser(input: $input) {\n    user { id }\n  }\n}\n```\n\nUse `fetchKey` sparingly — changing it forces a full network round trip.\nReserve `refetchQueries` \u002F manual refetch for cases where the mutation's side\neffects are too broad to capture in the response payload.\n\n## Fetch Only What You Need\n\nEach fragment should request only the fields the component actually renders.\nDo not add fields \"just in case\" — unused fields increase payload size and slow\ndown parsing and normalization. Relay's `unused-fields` lint rule catches this.\n\nIf a child component needs more data, add a fragment **to the child** and\nspread it in the parent — do not widen the parent's fragment.\n",{"data":41,"body":42},{"name":4,"description":6},{"type":43,"children":44},"root",[45,54,69,90,97,110,122,128,148,482,496,501,565,927,939,964,970,981,1076,1088,1094,1107,1206,1211,1217,1222,1495,1500,1506,1527,1532,1744,1750,1762,2461,2467,2487,2493,2514,2641,2661,2667,2680,2692],{"type":46,"tag":47,"props":48,"children":50},"element","h1",{"id":49},"relay-performance-best-practices",[51],{"type":52,"value":53},"text","Relay Performance Best Practices",{"type":46,"tag":55,"props":56,"children":57},"p",{},[58,60,67],{"type":52,"value":59},"Performance-focused guidance for Relay applications. For correctness, naming,\nand architectural patterns, see the ",{"type":46,"tag":61,"props":62,"children":64},"code",{"className":63},[],[65],{"type":52,"value":66},"relay-best-practices",{"type":52,"value":68}," skill.",{"type":46,"tag":55,"props":70,"children":71},{},[72,74,80,82,88],{"type":52,"value":73},"For detailed API documentation, read the relevant page from ",{"type":46,"tag":61,"props":75,"children":77},{"className":76},[],[78],{"type":52,"value":79},"\u003Cllm-docs>\u002F",{"type":52,"value":81},"\n(available in ",{"type":46,"tag":61,"props":83,"children":85},{"className":84},[],[86],{"type":52,"value":87},"node_modules\u002Frelay-runtime\u002Fllm-docs\u002F",{"type":52,"value":89}," after v20.1.1).",{"type":46,"tag":91,"props":92,"children":94},"h2",{"id":93},"one-query-per-screen",[95],{"type":52,"value":96},"One Query Per Screen",{"type":46,"tag":55,"props":98,"children":99},{},[100,102,108],{"type":52,"value":101},"Each screen or route should have ",{"type":46,"tag":103,"props":104,"children":105},"strong",{},[106],{"type":52,"value":107},"one",{"type":52,"value":109}," (or very few) root queries. Relay\ncoalesces all fragment data needs into a single network request per query.\nMultiple root queries on the same screen defeat this optimization — the browser\nmakes multiple parallel requests that each carry redundant overhead (HTTP\nheaders, connection setup, response parsing).",{"type":46,"tag":111,"props":112,"children":116},"pre",{"className":113,"code":115,"language":52},[114],"language-text","GOOD:                              BAD:\nRoute → 1 query                    Route → 3 queries\n  ├─ Header (fragment)               ├─ Header (query #1)\n  ├─ Content (fragment)               ├─ Content (query #2)\n  └─ Sidebar (fragment)               └─ Sidebar (query #3)\n",[117],{"type":46,"tag":61,"props":118,"children":120},{"__ignoreMap":119},"",[121],{"type":52,"value":115},{"type":46,"tag":91,"props":123,"children":125},{"id":124},"preload-before-rendering-the-root",[126],{"type":52,"value":127},"Preload Before Rendering the Root",{"type":46,"tag":55,"props":129,"children":130},{},[131,133,138,140,146],{"type":52,"value":132},"Fetch the initial query ",{"type":46,"tag":103,"props":134,"children":135},{},[136],{"type":52,"value":137},"before",{"type":52,"value":139}," calling ",{"type":46,"tag":61,"props":141,"children":143},{"className":142},[],[144],{"type":52,"value":145},"createRoot().render()",{"type":52,"value":147},". This\noverlaps the network request with React's initialization, minimizing time to\nfirst meaningful paint.",{"type":46,"tag":111,"props":149,"children":153},{"className":150,"code":151,"language":152,"meta":119,"style":119},"language-tsx shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u002F\u002F Start fetch immediately — before React even initializes\nconst queryRef = loadQuery(environment, AppQuery, initialVariables);\n\n\u002F\u002F Then render — data may already be available\nconst root = createRoot(document.getElementById('root'));\nroot.render(\n  \u003CRelayEnvironmentProvider environment={environment}>\n    \u003CSuspense fallback={\u003CAppSkeleton \u002F>}>\n      \u003CApp queryRef={queryRef} \u002F>\n    \u003C\u002FSuspense>\n  \u003C\u002FRelayEnvironmentProvider>\n);\n","tsx",[154],{"type":46,"tag":61,"props":155,"children":156},{"__ignoreMap":119},[157,169,226,236,245,310,332,367,401,434,452,469],{"type":46,"tag":158,"props":159,"children":162},"span",{"class":160,"line":161},"line",1,[163],{"type":46,"tag":158,"props":164,"children":166},{"style":165},"--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic",[167],{"type":52,"value":168},"\u002F\u002F Start fetch immediately — before React even initializes\n",{"type":46,"tag":158,"props":170,"children":172},{"class":160,"line":171},2,[173,179,185,191,197,202,207,212,216,221],{"type":46,"tag":158,"props":174,"children":176},{"style":175},"--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA",[177],{"type":52,"value":178},"const",{"type":46,"tag":158,"props":180,"children":182},{"style":181},"--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8",[183],{"type":52,"value":184}," queryRef ",{"type":46,"tag":158,"props":186,"children":188},{"style":187},"--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF",[189],{"type":52,"value":190},"=",{"type":46,"tag":158,"props":192,"children":194},{"style":193},"--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF",[195],{"type":52,"value":196}," loadQuery",{"type":46,"tag":158,"props":198,"children":199},{"style":181},[200],{"type":52,"value":201},"(environment",{"type":46,"tag":158,"props":203,"children":204},{"style":187},[205],{"type":52,"value":206},",",{"type":46,"tag":158,"props":208,"children":209},{"style":181},[210],{"type":52,"value":211}," AppQuery",{"type":46,"tag":158,"props":213,"children":214},{"style":187},[215],{"type":52,"value":206},{"type":46,"tag":158,"props":217,"children":218},{"style":181},[219],{"type":52,"value":220}," initialVariables)",{"type":46,"tag":158,"props":222,"children":223},{"style":187},[224],{"type":52,"value":225},";\n",{"type":46,"tag":158,"props":227,"children":229},{"class":160,"line":228},3,[230],{"type":46,"tag":158,"props":231,"children":233},{"emptyLinePlaceholder":232},true,[234],{"type":52,"value":235},"\n",{"type":46,"tag":158,"props":237,"children":239},{"class":160,"line":238},4,[240],{"type":46,"tag":158,"props":241,"children":242},{"style":165},[243],{"type":52,"value":244},"\u002F\u002F Then render — data may already be available\n",{"type":46,"tag":158,"props":246,"children":248},{"class":160,"line":247},5,[249,253,258,262,267,272,277,282,287,292,297,301,306],{"type":46,"tag":158,"props":250,"children":251},{"style":175},[252],{"type":52,"value":178},{"type":46,"tag":158,"props":254,"children":255},{"style":181},[256],{"type":52,"value":257}," root ",{"type":46,"tag":158,"props":259,"children":260},{"style":187},[261],{"type":52,"value":190},{"type":46,"tag":158,"props":263,"children":264},{"style":193},[265],{"type":52,"value":266}," createRoot",{"type":46,"tag":158,"props":268,"children":269},{"style":181},[270],{"type":52,"value":271},"(document",{"type":46,"tag":158,"props":273,"children":274},{"style":187},[275],{"type":52,"value":276},".",{"type":46,"tag":158,"props":278,"children":279},{"style":193},[280],{"type":52,"value":281},"getElementById",{"type":46,"tag":158,"props":283,"children":284},{"style":181},[285],{"type":52,"value":286},"(",{"type":46,"tag":158,"props":288,"children":289},{"style":187},[290],{"type":52,"value":291},"'",{"type":46,"tag":158,"props":293,"children":295},{"style":294},"--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D",[296],{"type":52,"value":43},{"type":46,"tag":158,"props":298,"children":299},{"style":187},[300],{"type":52,"value":291},{"type":46,"tag":158,"props":302,"children":303},{"style":181},[304],{"type":52,"value":305},"))",{"type":46,"tag":158,"props":307,"children":308},{"style":187},[309],{"type":52,"value":225},{"type":46,"tag":158,"props":311,"children":313},{"class":160,"line":312},6,[314,318,322,327],{"type":46,"tag":158,"props":315,"children":316},{"style":181},[317],{"type":52,"value":43},{"type":46,"tag":158,"props":319,"children":320},{"style":187},[321],{"type":52,"value":276},{"type":46,"tag":158,"props":323,"children":324},{"style":193},[325],{"type":52,"value":326},"render",{"type":46,"tag":158,"props":328,"children":329},{"style":181},[330],{"type":52,"value":331},"(\n",{"type":46,"tag":158,"props":333,"children":335},{"class":160,"line":334},7,[336,341,347,352,357,362],{"type":46,"tag":158,"props":337,"children":338},{"style":187},[339],{"type":52,"value":340},"  \u003C",{"type":46,"tag":158,"props":342,"children":344},{"style":343},"--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B",[345],{"type":52,"value":346},"RelayEnvironmentProvider",{"type":46,"tag":158,"props":348,"children":349},{"style":175},[350],{"type":52,"value":351}," environment",{"type":46,"tag":158,"props":353,"children":354},{"style":187},[355],{"type":52,"value":356},"={",{"type":46,"tag":158,"props":358,"children":359},{"style":181},[360],{"type":52,"value":361},"environment",{"type":46,"tag":158,"props":363,"children":364},{"style":187},[365],{"type":52,"value":366},"}>\n",{"type":46,"tag":158,"props":368,"children":370},{"class":160,"line":369},8,[371,376,381,386,391,396],{"type":46,"tag":158,"props":372,"children":373},{"style":187},[374],{"type":52,"value":375},"    \u003C",{"type":46,"tag":158,"props":377,"children":378},{"style":343},[379],{"type":52,"value":380},"Suspense",{"type":46,"tag":158,"props":382,"children":383},{"style":175},[384],{"type":52,"value":385}," fallback",{"type":46,"tag":158,"props":387,"children":388},{"style":187},[389],{"type":52,"value":390},"={\u003C",{"type":46,"tag":158,"props":392,"children":393},{"style":343},[394],{"type":52,"value":395},"AppSkeleton",{"type":46,"tag":158,"props":397,"children":398},{"style":187},[399],{"type":52,"value":400}," \u002F>}>\n",{"type":46,"tag":158,"props":402,"children":404},{"class":160,"line":403},9,[405,410,415,420,424,429],{"type":46,"tag":158,"props":406,"children":407},{"style":187},[408],{"type":52,"value":409},"      \u003C",{"type":46,"tag":158,"props":411,"children":412},{"style":343},[413],{"type":52,"value":414},"App",{"type":46,"tag":158,"props":416,"children":417},{"style":175},[418],{"type":52,"value":419}," queryRef",{"type":46,"tag":158,"props":421,"children":422},{"style":187},[423],{"type":52,"value":356},{"type":46,"tag":158,"props":425,"children":426},{"style":181},[427],{"type":52,"value":428},"queryRef",{"type":46,"tag":158,"props":430,"children":431},{"style":187},[432],{"type":52,"value":433},"} \u002F>\n",{"type":46,"tag":158,"props":435,"children":437},{"class":160,"line":436},10,[438,443,447],{"type":46,"tag":158,"props":439,"children":440},{"style":187},[441],{"type":52,"value":442},"    \u003C\u002F",{"type":46,"tag":158,"props":444,"children":445},{"style":343},[446],{"type":52,"value":380},{"type":46,"tag":158,"props":448,"children":449},{"style":187},[450],{"type":52,"value":451},">\n",{"type":46,"tag":158,"props":453,"children":455},{"class":160,"line":454},11,[456,461,465],{"type":46,"tag":158,"props":457,"children":458},{"style":187},[459],{"type":52,"value":460},"  \u003C\u002F",{"type":46,"tag":158,"props":462,"children":463},{"style":343},[464],{"type":52,"value":346},{"type":46,"tag":158,"props":466,"children":467},{"style":187},[468],{"type":52,"value":451},{"type":46,"tag":158,"props":470,"children":472},{"class":160,"line":471},12,[473,478],{"type":46,"tag":158,"props":474,"children":475},{"style":181},[476],{"type":52,"value":477},")",{"type":46,"tag":158,"props":479,"children":480},{"style":187},[481],{"type":52,"value":225},{"type":46,"tag":91,"props":483,"children":485},{"id":484},"use-defer-for-non-critical-content",[486,488,494],{"type":52,"value":487},"Use ",{"type":46,"tag":61,"props":489,"children":491},{"className":490},[],[492],{"type":52,"value":493},"@defer",{"type":52,"value":495}," for Non-Critical Content",{"type":46,"tag":55,"props":497,"children":498},{},[499],{"type":52,"value":500},"Defer secondary or below-the-fold content so primary UI renders faster.\nRelay streams deferred data progressively via Suspense — the initial response\narrives smaller and the critical path renders sooner.",{"type":46,"tag":111,"props":502,"children":505},{"className":503,"code":504,"language":25,"meta":119,"style":119},"language-graphql shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","query ProfileScreenQuery($id: ID!) {\n  user(id: $id) {\n    ...ProfileHeader_user\n    ...ProfileDetails_user @defer\n    ...ProfileComments_user @defer\n  }\n}\n",[506],{"type":46,"tag":61,"props":507,"children":508},{"__ignoreMap":119},[509,517,525,533,541,549,557],{"type":46,"tag":158,"props":510,"children":511},{"class":160,"line":161},[512],{"type":46,"tag":158,"props":513,"children":514},{},[515],{"type":52,"value":516},"query ProfileScreenQuery($id: ID!) {\n",{"type":46,"tag":158,"props":518,"children":519},{"class":160,"line":171},[520],{"type":46,"tag":158,"props":521,"children":522},{},[523],{"type":52,"value":524},"  user(id: $id) {\n",{"type":46,"tag":158,"props":526,"children":527},{"class":160,"line":228},[528],{"type":46,"tag":158,"props":529,"children":530},{},[531],{"type":52,"value":532},"    ...ProfileHeader_user\n",{"type":46,"tag":158,"props":534,"children":535},{"class":160,"line":238},[536],{"type":46,"tag":158,"props":537,"children":538},{},[539],{"type":52,"value":540},"    ...ProfileDetails_user @defer\n",{"type":46,"tag":158,"props":542,"children":543},{"class":160,"line":247},[544],{"type":46,"tag":158,"props":545,"children":546},{},[547],{"type":52,"value":548},"    ...ProfileComments_user @defer\n",{"type":46,"tag":158,"props":550,"children":551},{"class":160,"line":312},[552],{"type":46,"tag":158,"props":553,"children":554},{},[555],{"type":52,"value":556},"  }\n",{"type":46,"tag":158,"props":558,"children":559},{"class":160,"line":334},[560],{"type":46,"tag":158,"props":561,"children":562},{},[563],{"type":52,"value":564},"}\n",{"type":46,"tag":111,"props":566,"children":568},{"className":150,"code":567,"language":152,"meta":119,"style":119},"function ProfileScreen({ queryRef }) {\n  const data = usePreloadedQuery(ProfileScreenQuery, queryRef);\n\n  return (\n    \u003CScrollView>\n      \u003CProfileHeader user={data.user} \u002F>\n      \u003CSuspense fallback={\u003CDetailsSkeleton \u002F>}>\n        \u003CProfileDetails user={data.user} \u002F>\n      \u003C\u002FSuspense>\n      \u003CSuspense fallback={\u003CCommentsSkeleton \u002F>}>\n        \u003CProfileComments user={data.user} \u002F>\n      \u003C\u002FSuspense>\n    \u003C\u002FScrollView>\n  );\n}\n",[569],{"type":46,"tag":61,"props":570,"children":571},{"__ignoreMap":119},[572,605,654,661,675,691,730,758,795,811,839,875,890,906,919],{"type":46,"tag":158,"props":573,"children":574},{"class":160,"line":161},[575,580,585,590,595,600],{"type":46,"tag":158,"props":576,"children":577},{"style":175},[578],{"type":52,"value":579},"function",{"type":46,"tag":158,"props":581,"children":582},{"style":193},[583],{"type":52,"value":584}," ProfileScreen",{"type":46,"tag":158,"props":586,"children":587},{"style":187},[588],{"type":52,"value":589},"({",{"type":46,"tag":158,"props":591,"children":593},{"style":592},"--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic",[594],{"type":52,"value":419},{"type":46,"tag":158,"props":596,"children":597},{"style":187},[598],{"type":52,"value":599}," })",{"type":46,"tag":158,"props":601,"children":602},{"style":187},[603],{"type":52,"value":604}," {\n",{"type":46,"tag":158,"props":606,"children":607},{"class":160,"line":171},[608,613,618,623,628,633,638,642,646,650],{"type":46,"tag":158,"props":609,"children":610},{"style":175},[611],{"type":52,"value":612},"  const",{"type":46,"tag":158,"props":614,"children":615},{"style":181},[616],{"type":52,"value":617}," data",{"type":46,"tag":158,"props":619,"children":620},{"style":187},[621],{"type":52,"value":622}," =",{"type":46,"tag":158,"props":624,"children":625},{"style":193},[626],{"type":52,"value":627}," usePreloadedQuery",{"type":46,"tag":158,"props":629,"children":631},{"style":630},"--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178",[632],{"type":52,"value":286},{"type":46,"tag":158,"props":634,"children":635},{"style":181},[636],{"type":52,"value":637},"ProfileScreenQuery",{"type":46,"tag":158,"props":639,"children":640},{"style":187},[641],{"type":52,"value":206},{"type":46,"tag":158,"props":643,"children":644},{"style":181},[645],{"type":52,"value":419},{"type":46,"tag":158,"props":647,"children":648},{"style":630},[649],{"type":52,"value":477},{"type":46,"tag":158,"props":651,"children":652},{"style":187},[653],{"type":52,"value":225},{"type":46,"tag":158,"props":655,"children":656},{"class":160,"line":228},[657],{"type":46,"tag":158,"props":658,"children":659},{"emptyLinePlaceholder":232},[660],{"type":52,"value":235},{"type":46,"tag":158,"props":662,"children":663},{"class":160,"line":238},[664,670],{"type":46,"tag":158,"props":665,"children":667},{"style":666},"--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic",[668],{"type":52,"value":669},"  return",{"type":46,"tag":158,"props":671,"children":672},{"style":630},[673],{"type":52,"value":674}," (\n",{"type":46,"tag":158,"props":676,"children":677},{"class":160,"line":247},[678,682,687],{"type":46,"tag":158,"props":679,"children":680},{"style":187},[681],{"type":52,"value":375},{"type":46,"tag":158,"props":683,"children":684},{"style":343},[685],{"type":52,"value":686},"ScrollView",{"type":46,"tag":158,"props":688,"children":689},{"style":187},[690],{"type":52,"value":451},{"type":46,"tag":158,"props":692,"children":693},{"class":160,"line":312},[694,698,703,708,712,717,721,726],{"type":46,"tag":158,"props":695,"children":696},{"style":187},[697],{"type":52,"value":409},{"type":46,"tag":158,"props":699,"children":700},{"style":343},[701],{"type":52,"value":702},"ProfileHeader",{"type":46,"tag":158,"props":704,"children":705},{"style":175},[706],{"type":52,"value":707}," user",{"type":46,"tag":158,"props":709,"children":710},{"style":187},[711],{"type":52,"value":356},{"type":46,"tag":158,"props":713,"children":714},{"style":181},[715],{"type":52,"value":716},"data",{"type":46,"tag":158,"props":718,"children":719},{"style":187},[720],{"type":52,"value":276},{"type":46,"tag":158,"props":722,"children":723},{"style":181},[724],{"type":52,"value":725},"user",{"type":46,"tag":158,"props":727,"children":728},{"style":187},[729],{"type":52,"value":433},{"type":46,"tag":158,"props":731,"children":732},{"class":160,"line":334},[733,737,741,745,749,754],{"type":46,"tag":158,"props":734,"children":735},{"style":187},[736],{"type":52,"value":409},{"type":46,"tag":158,"props":738,"children":739},{"style":343},[740],{"type":52,"value":380},{"type":46,"tag":158,"props":742,"children":743},{"style":175},[744],{"type":52,"value":385},{"type":46,"tag":158,"props":746,"children":747},{"style":187},[748],{"type":52,"value":390},{"type":46,"tag":158,"props":750,"children":751},{"style":343},[752],{"type":52,"value":753},"DetailsSkeleton",{"type":46,"tag":158,"props":755,"children":756},{"style":187},[757],{"type":52,"value":400},{"type":46,"tag":158,"props":759,"children":760},{"class":160,"line":369},[761,766,771,775,779,783,787,791],{"type":46,"tag":158,"props":762,"children":763},{"style":187},[764],{"type":52,"value":765},"        \u003C",{"type":46,"tag":158,"props":767,"children":768},{"style":343},[769],{"type":52,"value":770},"ProfileDetails",{"type":46,"tag":158,"props":772,"children":773},{"style":175},[774],{"type":52,"value":707},{"type":46,"tag":158,"props":776,"children":777},{"style":187},[778],{"type":52,"value":356},{"type":46,"tag":158,"props":780,"children":781},{"style":181},[782],{"type":52,"value":716},{"type":46,"tag":158,"props":784,"children":785},{"style":187},[786],{"type":52,"value":276},{"type":46,"tag":158,"props":788,"children":789},{"style":181},[790],{"type":52,"value":725},{"type":46,"tag":158,"props":792,"children":793},{"style":187},[794],{"type":52,"value":433},{"type":46,"tag":158,"props":796,"children":797},{"class":160,"line":403},[798,803,807],{"type":46,"tag":158,"props":799,"children":800},{"style":187},[801],{"type":52,"value":802},"      \u003C\u002F",{"type":46,"tag":158,"props":804,"children":805},{"style":343},[806],{"type":52,"value":380},{"type":46,"tag":158,"props":808,"children":809},{"style":187},[810],{"type":52,"value":451},{"type":46,"tag":158,"props":812,"children":813},{"class":160,"line":436},[814,818,822,826,830,835],{"type":46,"tag":158,"props":815,"children":816},{"style":187},[817],{"type":52,"value":409},{"type":46,"tag":158,"props":819,"children":820},{"style":343},[821],{"type":52,"value":380},{"type":46,"tag":158,"props":823,"children":824},{"style":175},[825],{"type":52,"value":385},{"type":46,"tag":158,"props":827,"children":828},{"style":187},[829],{"type":52,"value":390},{"type":46,"tag":158,"props":831,"children":832},{"style":343},[833],{"type":52,"value":834},"CommentsSkeleton",{"type":46,"tag":158,"props":836,"children":837},{"style":187},[838],{"type":52,"value":400},{"type":46,"tag":158,"props":840,"children":841},{"class":160,"line":454},[842,846,851,855,859,863,867,871],{"type":46,"tag":158,"props":843,"children":844},{"style":187},[845],{"type":52,"value":765},{"type":46,"tag":158,"props":847,"children":848},{"style":343},[849],{"type":52,"value":850},"ProfileComments",{"type":46,"tag":158,"props":852,"children":853},{"style":175},[854],{"type":52,"value":707},{"type":46,"tag":158,"props":856,"children":857},{"style":187},[858],{"type":52,"value":356},{"type":46,"tag":158,"props":860,"children":861},{"style":181},[862],{"type":52,"value":716},{"type":46,"tag":158,"props":864,"children":865},{"style":187},[866],{"type":52,"value":276},{"type":46,"tag":158,"props":868,"children":869},{"style":181},[870],{"type":52,"value":725},{"type":46,"tag":158,"props":872,"children":873},{"style":187},[874],{"type":52,"value":433},{"type":46,"tag":158,"props":876,"children":877},{"class":160,"line":471},[878,882,886],{"type":46,"tag":158,"props":879,"children":880},{"style":187},[881],{"type":52,"value":802},{"type":46,"tag":158,"props":883,"children":884},{"style":343},[885],{"type":52,"value":380},{"type":46,"tag":158,"props":887,"children":888},{"style":187},[889],{"type":52,"value":451},{"type":46,"tag":158,"props":891,"children":893},{"class":160,"line":892},13,[894,898,902],{"type":46,"tag":158,"props":895,"children":896},{"style":187},[897],{"type":52,"value":442},{"type":46,"tag":158,"props":899,"children":900},{"style":343},[901],{"type":52,"value":686},{"type":46,"tag":158,"props":903,"children":904},{"style":187},[905],{"type":52,"value":451},{"type":46,"tag":158,"props":907,"children":909},{"class":160,"line":908},14,[910,915],{"type":46,"tag":158,"props":911,"children":912},{"style":630},[913],{"type":52,"value":914},"  )",{"type":46,"tag":158,"props":916,"children":917},{"style":187},[918],{"type":52,"value":225},{"type":46,"tag":158,"props":920,"children":922},{"class":160,"line":921},15,[923],{"type":46,"tag":158,"props":924,"children":925},{"style":187},[926],{"type":52,"value":564},{"type":46,"tag":55,"props":928,"children":929},{},[930,932,937],{"type":52,"value":931},"Good candidates for ",{"type":46,"tag":61,"props":933,"children":935},{"className":934},[],[936],{"type":52,"value":493},{"type":52,"value":938},":",{"type":46,"tag":940,"props":941,"children":942},"ul",{},[943,949,954,959],{"type":46,"tag":944,"props":945,"children":946},"li",{},[947],{"type":52,"value":948},"Sidebar content",{"type":46,"tag":944,"props":950,"children":951},{},[952],{"type":52,"value":953},"Below-the-fold sections",{"type":46,"tag":944,"props":955,"children":956},{},[957],{"type":52,"value":958},"Tabs and accordions not visible on initial load",{"type":46,"tag":944,"props":960,"children":961},{},[962],{"type":52,"value":963},"Heavy item details in paginated lists",{"type":46,"tag":91,"props":965,"children":967},{"id":966},"fetch-policies",[968],{"type":52,"value":969},"Fetch Policies",{"type":46,"tag":55,"props":971,"children":972},{},[973,979],{"type":46,"tag":61,"props":974,"children":976},{"className":975},[],[977],{"type":52,"value":978},"store-or-network",{"type":52,"value":980}," (the default) is correct for most cases — it reuses cached\ndata and only hits the network for missing or stale data.",{"type":46,"tag":982,"props":983,"children":984},"table",{},[985,1004],{"type":46,"tag":986,"props":987,"children":988},"thead",{},[989],{"type":46,"tag":990,"props":991,"children":992},"tr",{},[993,999],{"type":46,"tag":994,"props":995,"children":996},"th",{},[997],{"type":52,"value":998},"Policy",{"type":46,"tag":994,"props":1000,"children":1001},{},[1002],{"type":52,"value":1003},"When to use",{"type":46,"tag":1005,"props":1006,"children":1007},"tbody",{},[1008,1025,1042,1059],{"type":46,"tag":990,"props":1009,"children":1010},{},[1011,1020],{"type":46,"tag":1012,"props":1013,"children":1014},"td",{},[1015],{"type":46,"tag":61,"props":1016,"children":1018},{"className":1017},[],[1019],{"type":52,"value":978},{"type":46,"tag":1012,"props":1021,"children":1022},{},[1023],{"type":52,"value":1024},"Default. Best balance of speed and freshness.",{"type":46,"tag":990,"props":1026,"children":1027},{},[1028,1037],{"type":46,"tag":1012,"props":1029,"children":1030},{},[1031],{"type":46,"tag":61,"props":1032,"children":1034},{"className":1033},[],[1035],{"type":52,"value":1036},"store-and-network",{"type":46,"tag":1012,"props":1038,"children":1039},{},[1040],{"type":52,"value":1041},"Show cached data immediately, update in background.",{"type":46,"tag":990,"props":1043,"children":1044},{},[1045,1054],{"type":46,"tag":1012,"props":1046,"children":1047},{},[1048],{"type":46,"tag":61,"props":1049,"children":1051},{"className":1050},[],[1052],{"type":52,"value":1053},"network-only",{"type":46,"tag":1012,"props":1055,"children":1056},{},[1057],{"type":52,"value":1058},"Freshness is critical (e.g., after a mutation with wide side effects).",{"type":46,"tag":990,"props":1060,"children":1061},{},[1062,1071],{"type":46,"tag":1012,"props":1063,"children":1064},{},[1065],{"type":46,"tag":61,"props":1066,"children":1068},{"className":1067},[],[1069],{"type":52,"value":1070},"store-only",{"type":46,"tag":1012,"props":1072,"children":1073},{},[1074],{"type":52,"value":1075},"Offline-first or reading data already guaranteed to be in the store.",{"type":46,"tag":55,"props":1077,"children":1078},{},[1079,1081,1086],{"type":52,"value":1080},"Reserve ",{"type":46,"tag":61,"props":1082,"children":1084},{"className":1083},[],[1085],{"type":52,"value":1053},{"type":52,"value":1087}," for rare cases. Overusing it turns Relay into a\nno-cache client and eliminates the benefit of the normalized store.",{"type":46,"tag":91,"props":1089,"children":1091},{"id":1090},"configure-garbage-collection",[1092],{"type":52,"value":1093},"Configure Garbage Collection",{"type":46,"tag":55,"props":1095,"children":1096},{},[1097,1099,1105],{"type":52,"value":1098},"Set ",{"type":46,"tag":61,"props":1100,"children":1102},{"className":1101},[],[1103],{"type":52,"value":1104},"gcReleaseBufferSize",{"type":52,"value":1106}," on the Relay Store to retain recently-used queries\nafter their components unmount. The default is 10. This makes navigating back\nto a previously visited screen instant (data is still in the store) instead of\ntriggering a new network request.",{"type":46,"tag":111,"props":1108,"children":1110},{"className":150,"code":1109,"language":152,"meta":119,"style":119},"const store = new Store(new RecordSource(), {\n  gcReleaseBufferSize: 20,\n});\n",[1111],{"type":46,"tag":61,"props":1112,"children":1113},{"__ignoreMap":119},[1114,1167,1190],{"type":46,"tag":158,"props":1115,"children":1116},{"class":160,"line":161},[1117,1121,1126,1130,1135,1140,1144,1149,1154,1159,1163],{"type":46,"tag":158,"props":1118,"children":1119},{"style":175},[1120],{"type":52,"value":178},{"type":46,"tag":158,"props":1122,"children":1123},{"style":181},[1124],{"type":52,"value":1125}," store ",{"type":46,"tag":158,"props":1127,"children":1128},{"style":187},[1129],{"type":52,"value":190},{"type":46,"tag":158,"props":1131,"children":1132},{"style":187},[1133],{"type":52,"value":1134}," new",{"type":46,"tag":158,"props":1136,"children":1137},{"style":193},[1138],{"type":52,"value":1139}," Store",{"type":46,"tag":158,"props":1141,"children":1142},{"style":181},[1143],{"type":52,"value":286},{"type":46,"tag":158,"props":1145,"children":1146},{"style":187},[1147],{"type":52,"value":1148},"new",{"type":46,"tag":158,"props":1150,"children":1151},{"style":193},[1152],{"type":52,"value":1153}," RecordSource",{"type":46,"tag":158,"props":1155,"children":1156},{"style":181},[1157],{"type":52,"value":1158},"()",{"type":46,"tag":158,"props":1160,"children":1161},{"style":187},[1162],{"type":52,"value":206},{"type":46,"tag":158,"props":1164,"children":1165},{"style":187},[1166],{"type":52,"value":604},{"type":46,"tag":158,"props":1168,"children":1169},{"class":160,"line":171},[1170,1175,1179,1185],{"type":46,"tag":158,"props":1171,"children":1172},{"style":630},[1173],{"type":52,"value":1174},"  gcReleaseBufferSize",{"type":46,"tag":158,"props":1176,"children":1177},{"style":187},[1178],{"type":52,"value":938},{"type":46,"tag":158,"props":1180,"children":1182},{"style":1181},"--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C",[1183],{"type":52,"value":1184}," 20",{"type":46,"tag":158,"props":1186,"children":1187},{"style":187},[1188],{"type":52,"value":1189},",\n",{"type":46,"tag":158,"props":1191,"children":1192},{"class":160,"line":228},[1193,1198,1202],{"type":46,"tag":158,"props":1194,"children":1195},{"style":187},[1196],{"type":52,"value":1197},"}",{"type":46,"tag":158,"props":1199,"children":1200},{"style":181},[1201],{"type":52,"value":477},{"type":46,"tag":158,"props":1203,"children":1204},{"style":187},[1205],{"type":52,"value":225},{"type":46,"tag":55,"props":1207,"children":1208},{},[1209],{"type":52,"value":1210},"For apps with many screens or heavy navigation, increase the buffer. For\nmemory-constrained environments (mobile), keep it conservative.",{"type":46,"tag":91,"props":1212,"children":1214},{"id":1213},"filter-and-sort-on-the-server",[1215],{"type":52,"value":1216},"Filter and Sort on the Server",{"type":46,"tag":55,"props":1218,"children":1219},{},[1220],{"type":52,"value":1221},"Use GraphQL field arguments to filter and sort data on the server rather than\nfetching everything and processing in JavaScript.",{"type":46,"tag":111,"props":1223,"children":1225},{"className":150,"code":1224,"language":152,"meta":119,"style":119},"\u002F\u002F BAD: fetch all tasks, filter on client\nconst data = useFragment(graphql`\n  fragment TaskList_user on User {\n    tasks { id, title, status }\n  }\n`, user);\nconst active = data.tasks.filter(t => t.status === 'ACTIVE');\n\n\u002F\u002F GOOD: filter on server via field argument\nconst data = useFragment(graphql`\n  fragment TaskList_user on User {\n    tasks(status: ACTIVE) { id, title }\n  }\n`, user);\n",[1226],{"type":46,"tag":61,"props":1227,"children":1228},{"__ignoreMap":119},[1229,1237,1271,1279,1287,1294,1315,1408,1415,1423,1454,1461,1469,1476],{"type":46,"tag":158,"props":1230,"children":1231},{"class":160,"line":161},[1232],{"type":46,"tag":158,"props":1233,"children":1234},{"style":165},[1235],{"type":52,"value":1236},"\u002F\u002F BAD: fetch all tasks, filter on client\n",{"type":46,"tag":158,"props":1238,"children":1239},{"class":160,"line":171},[1240,1244,1249,1253,1258,1262,1266],{"type":46,"tag":158,"props":1241,"children":1242},{"style":175},[1243],{"type":52,"value":178},{"type":46,"tag":158,"props":1245,"children":1246},{"style":181},[1247],{"type":52,"value":1248}," data ",{"type":46,"tag":158,"props":1250,"children":1251},{"style":187},[1252],{"type":52,"value":190},{"type":46,"tag":158,"props":1254,"children":1255},{"style":193},[1256],{"type":52,"value":1257}," useFragment",{"type":46,"tag":158,"props":1259,"children":1260},{"style":181},[1261],{"type":52,"value":286},{"type":46,"tag":158,"props":1263,"children":1264},{"style":193},[1265],{"type":52,"value":25},{"type":46,"tag":158,"props":1267,"children":1268},{"style":187},[1269],{"type":52,"value":1270},"`\n",{"type":46,"tag":158,"props":1272,"children":1273},{"class":160,"line":228},[1274],{"type":46,"tag":158,"props":1275,"children":1276},{"style":294},[1277],{"type":52,"value":1278},"  fragment TaskList_user on User {\n",{"type":46,"tag":158,"props":1280,"children":1281},{"class":160,"line":238},[1282],{"type":46,"tag":158,"props":1283,"children":1284},{"style":294},[1285],{"type":52,"value":1286},"    tasks { id, title, status }\n",{"type":46,"tag":158,"props":1288,"children":1289},{"class":160,"line":247},[1290],{"type":46,"tag":158,"props":1291,"children":1292},{"style":294},[1293],{"type":52,"value":556},{"type":46,"tag":158,"props":1295,"children":1296},{"class":160,"line":312},[1297,1302,1306,1311],{"type":46,"tag":158,"props":1298,"children":1299},{"style":187},[1300],{"type":52,"value":1301},"`",{"type":46,"tag":158,"props":1303,"children":1304},{"style":187},[1305],{"type":52,"value":206},{"type":46,"tag":158,"props":1307,"children":1308},{"style":181},[1309],{"type":52,"value":1310}," user)",{"type":46,"tag":158,"props":1312,"children":1313},{"style":187},[1314],{"type":52,"value":225},{"type":46,"tag":158,"props":1316,"children":1317},{"class":160,"line":334},[1318,1322,1327,1331,1335,1339,1344,1348,1353,1357,1362,1367,1372,1376,1381,1386,1391,1396,1400,1404],{"type":46,"tag":158,"props":1319,"children":1320},{"style":175},[1321],{"type":52,"value":178},{"type":46,"tag":158,"props":1323,"children":1324},{"style":181},[1325],{"type":52,"value":1326}," active ",{"type":46,"tag":158,"props":1328,"children":1329},{"style":187},[1330],{"type":52,"value":190},{"type":46,"tag":158,"props":1332,"children":1333},{"style":181},[1334],{"type":52,"value":617},{"type":46,"tag":158,"props":1336,"children":1337},{"style":187},[1338],{"type":52,"value":276},{"type":46,"tag":158,"props":1340,"children":1341},{"style":181},[1342],{"type":52,"value":1343},"tasks",{"type":46,"tag":158,"props":1345,"children":1346},{"style":187},[1347],{"type":52,"value":276},{"type":46,"tag":158,"props":1349,"children":1350},{"style":193},[1351],{"type":52,"value":1352},"filter",{"type":46,"tag":158,"props":1354,"children":1355},{"style":181},[1356],{"type":52,"value":286},{"type":46,"tag":158,"props":1358,"children":1359},{"style":592},[1360],{"type":52,"value":1361},"t",{"type":46,"tag":158,"props":1363,"children":1364},{"style":175},[1365],{"type":52,"value":1366}," =>",{"type":46,"tag":158,"props":1368,"children":1369},{"style":181},[1370],{"type":52,"value":1371}," t",{"type":46,"tag":158,"props":1373,"children":1374},{"style":187},[1375],{"type":52,"value":276},{"type":46,"tag":158,"props":1377,"children":1378},{"style":181},[1379],{"type":52,"value":1380},"status ",{"type":46,"tag":158,"props":1382,"children":1383},{"style":187},[1384],{"type":52,"value":1385},"===",{"type":46,"tag":158,"props":1387,"children":1388},{"style":187},[1389],{"type":52,"value":1390}," '",{"type":46,"tag":158,"props":1392,"children":1393},{"style":294},[1394],{"type":52,"value":1395},"ACTIVE",{"type":46,"tag":158,"props":1397,"children":1398},{"style":187},[1399],{"type":52,"value":291},{"type":46,"tag":158,"props":1401,"children":1402},{"style":181},[1403],{"type":52,"value":477},{"type":46,"tag":158,"props":1405,"children":1406},{"style":187},[1407],{"type":52,"value":225},{"type":46,"tag":158,"props":1409,"children":1410},{"class":160,"line":369},[1411],{"type":46,"tag":158,"props":1412,"children":1413},{"emptyLinePlaceholder":232},[1414],{"type":52,"value":235},{"type":46,"tag":158,"props":1416,"children":1417},{"class":160,"line":403},[1418],{"type":46,"tag":158,"props":1419,"children":1420},{"style":165},[1421],{"type":52,"value":1422},"\u002F\u002F GOOD: filter on server via field argument\n",{"type":46,"tag":158,"props":1424,"children":1425},{"class":160,"line":436},[1426,1430,1434,1438,1442,1446,1450],{"type":46,"tag":158,"props":1427,"children":1428},{"style":175},[1429],{"type":52,"value":178},{"type":46,"tag":158,"props":1431,"children":1432},{"style":181},[1433],{"type":52,"value":1248},{"type":46,"tag":158,"props":1435,"children":1436},{"style":187},[1437],{"type":52,"value":190},{"type":46,"tag":158,"props":1439,"children":1440},{"style":193},[1441],{"type":52,"value":1257},{"type":46,"tag":158,"props":1443,"children":1444},{"style":181},[1445],{"type":52,"value":286},{"type":46,"tag":158,"props":1447,"children":1448},{"style":193},[1449],{"type":52,"value":25},{"type":46,"tag":158,"props":1451,"children":1452},{"style":187},[1453],{"type":52,"value":1270},{"type":46,"tag":158,"props":1455,"children":1456},{"class":160,"line":454},[1457],{"type":46,"tag":158,"props":1458,"children":1459},{"style":294},[1460],{"type":52,"value":1278},{"type":46,"tag":158,"props":1462,"children":1463},{"class":160,"line":471},[1464],{"type":46,"tag":158,"props":1465,"children":1466},{"style":294},[1467],{"type":52,"value":1468},"    tasks(status: ACTIVE) { id, title }\n",{"type":46,"tag":158,"props":1470,"children":1471},{"class":160,"line":892},[1472],{"type":46,"tag":158,"props":1473,"children":1474},{"style":294},[1475],{"type":52,"value":556},{"type":46,"tag":158,"props":1477,"children":1478},{"class":160,"line":908},[1479,1483,1487,1491],{"type":46,"tag":158,"props":1480,"children":1481},{"style":187},[1482],{"type":52,"value":1301},{"type":46,"tag":158,"props":1484,"children":1485},{"style":187},[1486],{"type":52,"value":206},{"type":46,"tag":158,"props":1488,"children":1489},{"style":181},[1490],{"type":52,"value":1310},{"type":46,"tag":158,"props":1492,"children":1493},{"style":187},[1494],{"type":52,"value":225},{"type":46,"tag":55,"props":1496,"children":1497},{},[1498],{"type":52,"value":1499},"Server-side filtering reduces payload size, avoids unnecessary network\ntransfer, and reduces memory usage on the client.",{"type":46,"tag":91,"props":1501,"children":1503},{"id":1502},"never-fetch-unbounded-collections",[1504],{"type":52,"value":1505},"Never Fetch Unbounded Collections",{"type":46,"tag":55,"props":1507,"children":1508},{},[1509,1511,1517,1519,1525],{"type":52,"value":1510},"Always paginate list fields using ",{"type":46,"tag":61,"props":1512,"children":1514},{"className":1513},[],[1515],{"type":52,"value":1516},"@connection",{"type":52,"value":1518}," + ",{"type":46,"tag":61,"props":1520,"children":1522},{"className":1521},[],[1523],{"type":52,"value":1524},"usePaginationFragment",{"type":52,"value":1526},".\nFetching an entire collection at once risks transferring megabytes of data,\nstalling the UI during normalization, and exhausting device memory.",{"type":46,"tag":55,"props":1528,"children":1529},{},[1530],{"type":52,"value":1531},"Start with a page size appropriate for the viewport (e.g., 10–20 items) and\nload more on scroll.",{"type":46,"tag":111,"props":1533,"children":1535},{"className":503,"code":1534,"language":25,"meta":119,"style":119},"# BAD: fetches every item — unbounded\nfragment NotificationList_user on User {\n  notifications {\n    id\n    message\n  }\n}\n\n# GOOD: paginated with a bounded first page\nfragment NotificationList_user on User\n  @argumentDefinitions(\n    count: { type: \"Int\", defaultValue: 10 }\n    cursor: { type: \"String\" }\n  )\n  @refetchable(queryName: \"NotificationListPaginationQuery\") {\n  notifications(first: $count, after: $cursor)\n    @connection(key: \"NotificationList_notifications\") {\n    edges {\n      node {\n        id\n        message\n      }\n    }\n  }\n}\n",[1536],{"type":46,"tag":61,"props":1537,"children":1538},{"__ignoreMap":119},[1539,1547,1555,1563,1571,1579,1586,1593,1600,1608,1616,1624,1632,1640,1648,1656,1665,1674,1683,1692,1701,1710,1719,1728,1736],{"type":46,"tag":158,"props":1540,"children":1541},{"class":160,"line":161},[1542],{"type":46,"tag":158,"props":1543,"children":1544},{},[1545],{"type":52,"value":1546},"# BAD: fetches every item — unbounded\n",{"type":46,"tag":158,"props":1548,"children":1549},{"class":160,"line":171},[1550],{"type":46,"tag":158,"props":1551,"children":1552},{},[1553],{"type":52,"value":1554},"fragment NotificationList_user on User {\n",{"type":46,"tag":158,"props":1556,"children":1557},{"class":160,"line":228},[1558],{"type":46,"tag":158,"props":1559,"children":1560},{},[1561],{"type":52,"value":1562},"  notifications {\n",{"type":46,"tag":158,"props":1564,"children":1565},{"class":160,"line":238},[1566],{"type":46,"tag":158,"props":1567,"children":1568},{},[1569],{"type":52,"value":1570},"    id\n",{"type":46,"tag":158,"props":1572,"children":1573},{"class":160,"line":247},[1574],{"type":46,"tag":158,"props":1575,"children":1576},{},[1577],{"type":52,"value":1578},"    message\n",{"type":46,"tag":158,"props":1580,"children":1581},{"class":160,"line":312},[1582],{"type":46,"tag":158,"props":1583,"children":1584},{},[1585],{"type":52,"value":556},{"type":46,"tag":158,"props":1587,"children":1588},{"class":160,"line":334},[1589],{"type":46,"tag":158,"props":1590,"children":1591},{},[1592],{"type":52,"value":564},{"type":46,"tag":158,"props":1594,"children":1595},{"class":160,"line":369},[1596],{"type":46,"tag":158,"props":1597,"children":1598},{"emptyLinePlaceholder":232},[1599],{"type":52,"value":235},{"type":46,"tag":158,"props":1601,"children":1602},{"class":160,"line":403},[1603],{"type":46,"tag":158,"props":1604,"children":1605},{},[1606],{"type":52,"value":1607},"# GOOD: paginated with a bounded first page\n",{"type":46,"tag":158,"props":1609,"children":1610},{"class":160,"line":436},[1611],{"type":46,"tag":158,"props":1612,"children":1613},{},[1614],{"type":52,"value":1615},"fragment NotificationList_user on User\n",{"type":46,"tag":158,"props":1617,"children":1618},{"class":160,"line":454},[1619],{"type":46,"tag":158,"props":1620,"children":1621},{},[1622],{"type":52,"value":1623},"  @argumentDefinitions(\n",{"type":46,"tag":158,"props":1625,"children":1626},{"class":160,"line":471},[1627],{"type":46,"tag":158,"props":1628,"children":1629},{},[1630],{"type":52,"value":1631},"    count: { type: \"Int\", defaultValue: 10 }\n",{"type":46,"tag":158,"props":1633,"children":1634},{"class":160,"line":892},[1635],{"type":46,"tag":158,"props":1636,"children":1637},{},[1638],{"type":52,"value":1639},"    cursor: { type: \"String\" }\n",{"type":46,"tag":158,"props":1641,"children":1642},{"class":160,"line":908},[1643],{"type":46,"tag":158,"props":1644,"children":1645},{},[1646],{"type":52,"value":1647},"  )\n",{"type":46,"tag":158,"props":1649,"children":1650},{"class":160,"line":921},[1651],{"type":46,"tag":158,"props":1652,"children":1653},{},[1654],{"type":52,"value":1655},"  @refetchable(queryName: \"NotificationListPaginationQuery\") {\n",{"type":46,"tag":158,"props":1657,"children":1659},{"class":160,"line":1658},16,[1660],{"type":46,"tag":158,"props":1661,"children":1662},{},[1663],{"type":52,"value":1664},"  notifications(first: $count, after: $cursor)\n",{"type":46,"tag":158,"props":1666,"children":1668},{"class":160,"line":1667},17,[1669],{"type":46,"tag":158,"props":1670,"children":1671},{},[1672],{"type":52,"value":1673},"    @connection(key: \"NotificationList_notifications\") {\n",{"type":46,"tag":158,"props":1675,"children":1677},{"class":160,"line":1676},18,[1678],{"type":46,"tag":158,"props":1679,"children":1680},{},[1681],{"type":52,"value":1682},"    edges {\n",{"type":46,"tag":158,"props":1684,"children":1686},{"class":160,"line":1685},19,[1687],{"type":46,"tag":158,"props":1688,"children":1689},{},[1690],{"type":52,"value":1691},"      node {\n",{"type":46,"tag":158,"props":1693,"children":1695},{"class":160,"line":1694},20,[1696],{"type":46,"tag":158,"props":1697,"children":1698},{},[1699],{"type":52,"value":1700},"        id\n",{"type":46,"tag":158,"props":1702,"children":1704},{"class":160,"line":1703},21,[1705],{"type":46,"tag":158,"props":1706,"children":1707},{},[1708],{"type":52,"value":1709},"        message\n",{"type":46,"tag":158,"props":1711,"children":1713},{"class":160,"line":1712},22,[1714],{"type":46,"tag":158,"props":1715,"children":1716},{},[1717],{"type":52,"value":1718},"      }\n",{"type":46,"tag":158,"props":1720,"children":1722},{"class":160,"line":1721},23,[1723],{"type":46,"tag":158,"props":1724,"children":1725},{},[1726],{"type":52,"value":1727},"    }\n",{"type":46,"tag":158,"props":1729,"children":1731},{"class":160,"line":1730},24,[1732],{"type":46,"tag":158,"props":1733,"children":1734},{},[1735],{"type":52,"value":556},{"type":46,"tag":158,"props":1737,"children":1739},{"class":160,"line":1738},25,[1740],{"type":46,"tag":158,"props":1741,"children":1742},{},[1743],{"type":52,"value":564},{"type":46,"tag":91,"props":1745,"children":1747},{"id":1746},"keep-fragments-granular",[1748],{"type":52,"value":1749},"Keep Fragments Granular",{"type":46,"tag":55,"props":1751,"children":1752},{},[1753,1755,1760],{"type":52,"value":1754},"Split large fragments into smaller, component-scoped fragments so Relay can\nre-render ",{"type":46,"tag":103,"props":1756,"children":1757},{},[1758],{"type":52,"value":1759},"only",{"type":52,"value":1761}," the components whose data actually changed. A single\nmonolithic fragment shared by many components causes all of them to re-render\nwhen any field in the fragment changes.",{"type":46,"tag":111,"props":1763,"children":1765},{"className":150,"code":1764,"language":152,"meta":119,"style":119},"\u002F\u002F BAD: one large fragment, all children re-render on any field change\nfunction PostCard({ post }) {\n  const data = useFragment(graphql`\n    fragment PostCard_post on Post {\n      title\n      body\n      author { name, profilePicture { uri } }\n      likeCount\n      commentCount\n    }\n  `, post);\n  return (\n    \u003C>\n      \u003CPostHeader title={data.title} author={data.author} \u002F>\n      \u003CPostBody body={data.body} \u002F>\n      \u003CPostFooter likes={data.likeCount} comments={data.commentCount} \u002F>\n    \u003C\u002F>\n  );\n}\n\n\u002F\u002F GOOD: each child owns its fragment, re-renders independently\nfunction PostHeader({ post }: { post: PostHeader_post$key }) {\n  const data = useFragment(graphql`\n    fragment PostHeader_post on Post {\n      title\n      author { name }\n    }\n  `, post);\n  \u002F\u002F Only re-renders when title or author.name changes\n}\n\nfunction PostFooter({ post }: { post: PostFooter_post$key }) {\n  const data = useFragment(graphql`\n    fragment PostFooter_post on Post {\n      likeCount\n      commentCount\n    }\n  `, post);\n  \u002F\u002F Only re-renders when like\u002Fcomment counts change\n}\n",[1766],{"type":46,"tag":61,"props":1767,"children":1768},{"__ignoreMap":119},[1769,1777,1806,1837,1845,1853,1861,1869,1877,1885,1892,1916,1927,1935,1999,2037,2101,2109,2120,2127,2134,2142,2193,2224,2232,2239,2248,2256,2280,2289,2297,2305,2355,2387,2396,2404,2412,2420,2444,2453],{"type":46,"tag":158,"props":1770,"children":1771},{"class":160,"line":161},[1772],{"type":46,"tag":158,"props":1773,"children":1774},{"style":165},[1775],{"type":52,"value":1776},"\u002F\u002F BAD: one large fragment, all children re-render on any field change\n",{"type":46,"tag":158,"props":1778,"children":1779},{"class":160,"line":171},[1780,1784,1789,1793,1798,1802],{"type":46,"tag":158,"props":1781,"children":1782},{"style":175},[1783],{"type":52,"value":579},{"type":46,"tag":158,"props":1785,"children":1786},{"style":193},[1787],{"type":52,"value":1788}," PostCard",{"type":46,"tag":158,"props":1790,"children":1791},{"style":187},[1792],{"type":52,"value":589},{"type":46,"tag":158,"props":1794,"children":1795},{"style":592},[1796],{"type":52,"value":1797}," post",{"type":46,"tag":158,"props":1799,"children":1800},{"style":187},[1801],{"type":52,"value":599},{"type":46,"tag":158,"props":1803,"children":1804},{"style":187},[1805],{"type":52,"value":604},{"type":46,"tag":158,"props":1807,"children":1808},{"class":160,"line":228},[1809,1813,1817,1821,1825,1829,1833],{"type":46,"tag":158,"props":1810,"children":1811},{"style":175},[1812],{"type":52,"value":612},{"type":46,"tag":158,"props":1814,"children":1815},{"style":181},[1816],{"type":52,"value":617},{"type":46,"tag":158,"props":1818,"children":1819},{"style":187},[1820],{"type":52,"value":622},{"type":46,"tag":158,"props":1822,"children":1823},{"style":193},[1824],{"type":52,"value":1257},{"type":46,"tag":158,"props":1826,"children":1827},{"style":630},[1828],{"type":52,"value":286},{"type":46,"tag":158,"props":1830,"children":1831},{"style":193},[1832],{"type":52,"value":25},{"type":46,"tag":158,"props":1834,"children":1835},{"style":187},[1836],{"type":52,"value":1270},{"type":46,"tag":158,"props":1838,"children":1839},{"class":160,"line":238},[1840],{"type":46,"tag":158,"props":1841,"children":1842},{"style":294},[1843],{"type":52,"value":1844},"    fragment PostCard_post on Post {\n",{"type":46,"tag":158,"props":1846,"children":1847},{"class":160,"line":247},[1848],{"type":46,"tag":158,"props":1849,"children":1850},{"style":294},[1851],{"type":52,"value":1852},"      title\n",{"type":46,"tag":158,"props":1854,"children":1855},{"class":160,"line":312},[1856],{"type":46,"tag":158,"props":1857,"children":1858},{"style":294},[1859],{"type":52,"value":1860},"      body\n",{"type":46,"tag":158,"props":1862,"children":1863},{"class":160,"line":334},[1864],{"type":46,"tag":158,"props":1865,"children":1866},{"style":294},[1867],{"type":52,"value":1868},"      author { name, profilePicture { uri } }\n",{"type":46,"tag":158,"props":1870,"children":1871},{"class":160,"line":369},[1872],{"type":46,"tag":158,"props":1873,"children":1874},{"style":294},[1875],{"type":52,"value":1876},"      likeCount\n",{"type":46,"tag":158,"props":1878,"children":1879},{"class":160,"line":403},[1880],{"type":46,"tag":158,"props":1881,"children":1882},{"style":294},[1883],{"type":52,"value":1884},"      commentCount\n",{"type":46,"tag":158,"props":1886,"children":1887},{"class":160,"line":436},[1888],{"type":46,"tag":158,"props":1889,"children":1890},{"style":294},[1891],{"type":52,"value":1727},{"type":46,"tag":158,"props":1893,"children":1894},{"class":160,"line":454},[1895,1900,1904,1908,1912],{"type":46,"tag":158,"props":1896,"children":1897},{"style":187},[1898],{"type":52,"value":1899},"  `",{"type":46,"tag":158,"props":1901,"children":1902},{"style":187},[1903],{"type":52,"value":206},{"type":46,"tag":158,"props":1905,"children":1906},{"style":181},[1907],{"type":52,"value":1797},{"type":46,"tag":158,"props":1909,"children":1910},{"style":630},[1911],{"type":52,"value":477},{"type":46,"tag":158,"props":1913,"children":1914},{"style":187},[1915],{"type":52,"value":225},{"type":46,"tag":158,"props":1917,"children":1918},{"class":160,"line":471},[1919,1923],{"type":46,"tag":158,"props":1920,"children":1921},{"style":666},[1922],{"type":52,"value":669},{"type":46,"tag":158,"props":1924,"children":1925},{"style":630},[1926],{"type":52,"value":674},{"type":46,"tag":158,"props":1928,"children":1929},{"class":160,"line":892},[1930],{"type":46,"tag":158,"props":1931,"children":1932},{"style":187},[1933],{"type":52,"value":1934},"    \u003C>\n",{"type":46,"tag":158,"props":1936,"children":1937},{"class":160,"line":908},[1938,1942,1947,1952,1956,1960,1964,1969,1974,1979,1983,1987,1991,1995],{"type":46,"tag":158,"props":1939,"children":1940},{"style":187},[1941],{"type":52,"value":409},{"type":46,"tag":158,"props":1943,"children":1944},{"style":343},[1945],{"type":52,"value":1946},"PostHeader",{"type":46,"tag":158,"props":1948,"children":1949},{"style":175},[1950],{"type":52,"value":1951}," title",{"type":46,"tag":158,"props":1953,"children":1954},{"style":187},[1955],{"type":52,"value":356},{"type":46,"tag":158,"props":1957,"children":1958},{"style":181},[1959],{"type":52,"value":716},{"type":46,"tag":158,"props":1961,"children":1962},{"style":187},[1963],{"type":52,"value":276},{"type":46,"tag":158,"props":1965,"children":1966},{"style":181},[1967],{"type":52,"value":1968},"title",{"type":46,"tag":158,"props":1970,"children":1971},{"style":187},[1972],{"type":52,"value":1973},"} ",{"type":46,"tag":158,"props":1975,"children":1976},{"style":175},[1977],{"type":52,"value":1978},"author",{"type":46,"tag":158,"props":1980,"children":1981},{"style":187},[1982],{"type":52,"value":356},{"type":46,"tag":158,"props":1984,"children":1985},{"style":181},[1986],{"type":52,"value":716},{"type":46,"tag":158,"props":1988,"children":1989},{"style":187},[1990],{"type":52,"value":276},{"type":46,"tag":158,"props":1992,"children":1993},{"style":181},[1994],{"type":52,"value":1978},{"type":46,"tag":158,"props":1996,"children":1997},{"style":187},[1998],{"type":52,"value":433},{"type":46,"tag":158,"props":2000,"children":2001},{"class":160,"line":921},[2002,2006,2011,2016,2020,2024,2028,2033],{"type":46,"tag":158,"props":2003,"children":2004},{"style":187},[2005],{"type":52,"value":409},{"type":46,"tag":158,"props":2007,"children":2008},{"style":343},[2009],{"type":52,"value":2010},"PostBody",{"type":46,"tag":158,"props":2012,"children":2013},{"style":175},[2014],{"type":52,"value":2015}," body",{"type":46,"tag":158,"props":2017,"children":2018},{"style":187},[2019],{"type":52,"value":356},{"type":46,"tag":158,"props":2021,"children":2022},{"style":181},[2023],{"type":52,"value":716},{"type":46,"tag":158,"props":2025,"children":2026},{"style":187},[2027],{"type":52,"value":276},{"type":46,"tag":158,"props":2029,"children":2030},{"style":181},[2031],{"type":52,"value":2032},"body",{"type":46,"tag":158,"props":2034,"children":2035},{"style":187},[2036],{"type":52,"value":433},{"type":46,"tag":158,"props":2038,"children":2039},{"class":160,"line":1658},[2040,2044,2049,2054,2058,2062,2066,2071,2075,2080,2084,2088,2092,2097],{"type":46,"tag":158,"props":2041,"children":2042},{"style":187},[2043],{"type":52,"value":409},{"type":46,"tag":158,"props":2045,"children":2046},{"style":343},[2047],{"type":52,"value":2048},"PostFooter",{"type":46,"tag":158,"props":2050,"children":2051},{"style":175},[2052],{"type":52,"value":2053}," likes",{"type":46,"tag":158,"props":2055,"children":2056},{"style":187},[2057],{"type":52,"value":356},{"type":46,"tag":158,"props":2059,"children":2060},{"style":181},[2061],{"type":52,"value":716},{"type":46,"tag":158,"props":2063,"children":2064},{"style":187},[2065],{"type":52,"value":276},{"type":46,"tag":158,"props":2067,"children":2068},{"style":181},[2069],{"type":52,"value":2070},"likeCount",{"type":46,"tag":158,"props":2072,"children":2073},{"style":187},[2074],{"type":52,"value":1973},{"type":46,"tag":158,"props":2076,"children":2077},{"style":175},[2078],{"type":52,"value":2079},"comments",{"type":46,"tag":158,"props":2081,"children":2082},{"style":187},[2083],{"type":52,"value":356},{"type":46,"tag":158,"props":2085,"children":2086},{"style":181},[2087],{"type":52,"value":716},{"type":46,"tag":158,"props":2089,"children":2090},{"style":187},[2091],{"type":52,"value":276},{"type":46,"tag":158,"props":2093,"children":2094},{"style":181},[2095],{"type":52,"value":2096},"commentCount",{"type":46,"tag":158,"props":2098,"children":2099},{"style":187},[2100],{"type":52,"value":433},{"type":46,"tag":158,"props":2102,"children":2103},{"class":160,"line":1667},[2104],{"type":46,"tag":158,"props":2105,"children":2106},{"style":187},[2107],{"type":52,"value":2108},"    \u003C\u002F>\n",{"type":46,"tag":158,"props":2110,"children":2111},{"class":160,"line":1676},[2112,2116],{"type":46,"tag":158,"props":2113,"children":2114},{"style":630},[2115],{"type":52,"value":914},{"type":46,"tag":158,"props":2117,"children":2118},{"style":187},[2119],{"type":52,"value":225},{"type":46,"tag":158,"props":2121,"children":2122},{"class":160,"line":1685},[2123],{"type":46,"tag":158,"props":2124,"children":2125},{"style":187},[2126],{"type":52,"value":564},{"type":46,"tag":158,"props":2128,"children":2129},{"class":160,"line":1694},[2130],{"type":46,"tag":158,"props":2131,"children":2132},{"emptyLinePlaceholder":232},[2133],{"type":52,"value":235},{"type":46,"tag":158,"props":2135,"children":2136},{"class":160,"line":1703},[2137],{"type":46,"tag":158,"props":2138,"children":2139},{"style":165},[2140],{"type":52,"value":2141},"\u002F\u002F GOOD: each child owns its fragment, re-renders independently\n",{"type":46,"tag":158,"props":2143,"children":2144},{"class":160,"line":1712},[2145,2149,2154,2158,2162,2167,2172,2176,2180,2185,2189],{"type":46,"tag":158,"props":2146,"children":2147},{"style":175},[2148],{"type":52,"value":579},{"type":46,"tag":158,"props":2150,"children":2151},{"style":193},[2152],{"type":52,"value":2153}," PostHeader",{"type":46,"tag":158,"props":2155,"children":2156},{"style":187},[2157],{"type":52,"value":589},{"type":46,"tag":158,"props":2159,"children":2160},{"style":592},[2161],{"type":52,"value":1797},{"type":46,"tag":158,"props":2163,"children":2164},{"style":187},[2165],{"type":52,"value":2166}," }:",{"type":46,"tag":158,"props":2168,"children":2169},{"style":187},[2170],{"type":52,"value":2171}," {",{"type":46,"tag":158,"props":2173,"children":2174},{"style":630},[2175],{"type":52,"value":1797},{"type":46,"tag":158,"props":2177,"children":2178},{"style":187},[2179],{"type":52,"value":938},{"type":46,"tag":158,"props":2181,"children":2182},{"style":343},[2183],{"type":52,"value":2184}," PostHeader_post$key",{"type":46,"tag":158,"props":2186,"children":2187},{"style":187},[2188],{"type":52,"value":599},{"type":46,"tag":158,"props":2190,"children":2191},{"style":187},[2192],{"type":52,"value":604},{"type":46,"tag":158,"props":2194,"children":2195},{"class":160,"line":1721},[2196,2200,2204,2208,2212,2216,2220],{"type":46,"tag":158,"props":2197,"children":2198},{"style":175},[2199],{"type":52,"value":612},{"type":46,"tag":158,"props":2201,"children":2202},{"style":181},[2203],{"type":52,"value":617},{"type":46,"tag":158,"props":2205,"children":2206},{"style":187},[2207],{"type":52,"value":622},{"type":46,"tag":158,"props":2209,"children":2210},{"style":193},[2211],{"type":52,"value":1257},{"type":46,"tag":158,"props":2213,"children":2214},{"style":630},[2215],{"type":52,"value":286},{"type":46,"tag":158,"props":2217,"children":2218},{"style":193},[2219],{"type":52,"value":25},{"type":46,"tag":158,"props":2221,"children":2222},{"style":187},[2223],{"type":52,"value":1270},{"type":46,"tag":158,"props":2225,"children":2226},{"class":160,"line":1730},[2227],{"type":46,"tag":158,"props":2228,"children":2229},{"style":294},[2230],{"type":52,"value":2231},"    fragment PostHeader_post on Post {\n",{"type":46,"tag":158,"props":2233,"children":2234},{"class":160,"line":1738},[2235],{"type":46,"tag":158,"props":2236,"children":2237},{"style":294},[2238],{"type":52,"value":1852},{"type":46,"tag":158,"props":2240,"children":2242},{"class":160,"line":2241},26,[2243],{"type":46,"tag":158,"props":2244,"children":2245},{"style":294},[2246],{"type":52,"value":2247},"      author { name }\n",{"type":46,"tag":158,"props":2249,"children":2251},{"class":160,"line":2250},27,[2252],{"type":46,"tag":158,"props":2253,"children":2254},{"style":294},[2255],{"type":52,"value":1727},{"type":46,"tag":158,"props":2257,"children":2259},{"class":160,"line":2258},28,[2260,2264,2268,2272,2276],{"type":46,"tag":158,"props":2261,"children":2262},{"style":187},[2263],{"type":52,"value":1899},{"type":46,"tag":158,"props":2265,"children":2266},{"style":187},[2267],{"type":52,"value":206},{"type":46,"tag":158,"props":2269,"children":2270},{"style":181},[2271],{"type":52,"value":1797},{"type":46,"tag":158,"props":2273,"children":2274},{"style":630},[2275],{"type":52,"value":477},{"type":46,"tag":158,"props":2277,"children":2278},{"style":187},[2279],{"type":52,"value":225},{"type":46,"tag":158,"props":2281,"children":2283},{"class":160,"line":2282},29,[2284],{"type":46,"tag":158,"props":2285,"children":2286},{"style":165},[2287],{"type":52,"value":2288},"  \u002F\u002F Only re-renders when title or author.name changes\n",{"type":46,"tag":158,"props":2290,"children":2292},{"class":160,"line":2291},30,[2293],{"type":46,"tag":158,"props":2294,"children":2295},{"style":187},[2296],{"type":52,"value":564},{"type":46,"tag":158,"props":2298,"children":2300},{"class":160,"line":2299},31,[2301],{"type":46,"tag":158,"props":2302,"children":2303},{"emptyLinePlaceholder":232},[2304],{"type":52,"value":235},{"type":46,"tag":158,"props":2306,"children":2308},{"class":160,"line":2307},32,[2309,2313,2318,2322,2326,2330,2334,2338,2342,2347,2351],{"type":46,"tag":158,"props":2310,"children":2311},{"style":175},[2312],{"type":52,"value":579},{"type":46,"tag":158,"props":2314,"children":2315},{"style":193},[2316],{"type":52,"value":2317}," PostFooter",{"type":46,"tag":158,"props":2319,"children":2320},{"style":187},[2321],{"type":52,"value":589},{"type":46,"tag":158,"props":2323,"children":2324},{"style":592},[2325],{"type":52,"value":1797},{"type":46,"tag":158,"props":2327,"children":2328},{"style":187},[2329],{"type":52,"value":2166},{"type":46,"tag":158,"props":2331,"children":2332},{"style":187},[2333],{"type":52,"value":2171},{"type":46,"tag":158,"props":2335,"children":2336},{"style":630},[2337],{"type":52,"value":1797},{"type":46,"tag":158,"props":2339,"children":2340},{"style":187},[2341],{"type":52,"value":938},{"type":46,"tag":158,"props":2343,"children":2344},{"style":343},[2345],{"type":52,"value":2346}," PostFooter_post$key",{"type":46,"tag":158,"props":2348,"children":2349},{"style":187},[2350],{"type":52,"value":599},{"type":46,"tag":158,"props":2352,"children":2353},{"style":187},[2354],{"type":52,"value":604},{"type":46,"tag":158,"props":2356,"children":2358},{"class":160,"line":2357},33,[2359,2363,2367,2371,2375,2379,2383],{"type":46,"tag":158,"props":2360,"children":2361},{"style":175},[2362],{"type":52,"value":612},{"type":46,"tag":158,"props":2364,"children":2365},{"style":181},[2366],{"type":52,"value":617},{"type":46,"tag":158,"props":2368,"children":2369},{"style":187},[2370],{"type":52,"value":622},{"type":46,"tag":158,"props":2372,"children":2373},{"style":193},[2374],{"type":52,"value":1257},{"type":46,"tag":158,"props":2376,"children":2377},{"style":630},[2378],{"type":52,"value":286},{"type":46,"tag":158,"props":2380,"children":2381},{"style":193},[2382],{"type":52,"value":25},{"type":46,"tag":158,"props":2384,"children":2385},{"style":187},[2386],{"type":52,"value":1270},{"type":46,"tag":158,"props":2388,"children":2390},{"class":160,"line":2389},34,[2391],{"type":46,"tag":158,"props":2392,"children":2393},{"style":294},[2394],{"type":52,"value":2395},"    fragment PostFooter_post on Post {\n",{"type":46,"tag":158,"props":2397,"children":2399},{"class":160,"line":2398},35,[2400],{"type":46,"tag":158,"props":2401,"children":2402},{"style":294},[2403],{"type":52,"value":1876},{"type":46,"tag":158,"props":2405,"children":2407},{"class":160,"line":2406},36,[2408],{"type":46,"tag":158,"props":2409,"children":2410},{"style":294},[2411],{"type":52,"value":1884},{"type":46,"tag":158,"props":2413,"children":2415},{"class":160,"line":2414},37,[2416],{"type":46,"tag":158,"props":2417,"children":2418},{"style":294},[2419],{"type":52,"value":1727},{"type":46,"tag":158,"props":2421,"children":2423},{"class":160,"line":2422},38,[2424,2428,2432,2436,2440],{"type":46,"tag":158,"props":2425,"children":2426},{"style":187},[2427],{"type":52,"value":1899},{"type":46,"tag":158,"props":2429,"children":2430},{"style":187},[2431],{"type":52,"value":206},{"type":46,"tag":158,"props":2433,"children":2434},{"style":181},[2435],{"type":52,"value":1797},{"type":46,"tag":158,"props":2437,"children":2438},{"style":630},[2439],{"type":52,"value":477},{"type":46,"tag":158,"props":2441,"children":2442},{"style":187},[2443],{"type":52,"value":225},{"type":46,"tag":158,"props":2445,"children":2447},{"class":160,"line":2446},39,[2448],{"type":46,"tag":158,"props":2449,"children":2450},{"style":165},[2451],{"type":52,"value":2452},"  \u002F\u002F Only re-renders when like\u002Fcomment counts change\n",{"type":46,"tag":158,"props":2454,"children":2456},{"class":160,"line":2455},40,[2457],{"type":46,"tag":158,"props":2458,"children":2459},{"style":187},[2460],{"type":52,"value":564},{"type":46,"tag":91,"props":2462,"children":2464},{"id":2463},"one-connection-per-component",[2465],{"type":52,"value":2466},"One Connection Per Component",{"type":46,"tag":55,"props":2468,"children":2469},{},[2470,2472,2477,2479,2485],{"type":52,"value":2471},"Use a single ",{"type":46,"tag":61,"props":2473,"children":2475},{"className":2474},[],[2476],{"type":52,"value":1524},{"type":52,"value":2478}," per component. Multiple connections in\none component make pagination state harder to reason about — cursor tracking,\nloading states, and ",{"type":46,"tag":61,"props":2480,"children":2482},{"className":2481},[],[2483],{"type":52,"value":2484},"hasNext",{"type":52,"value":2486}," flags become tangled. Split each connection into\nits own component instead.",{"type":46,"tag":91,"props":2488,"children":2490},{"id":2489},"avoid-unnecessary-refetches",[2491],{"type":52,"value":2492},"Avoid Unnecessary Refetches",{"type":46,"tag":55,"props":2494,"children":2495},{},[2496,2498,2504,2506,2512],{"type":52,"value":2497},"After a mutation, let Relay's normalized store auto-update components by\nspreading relevant fragments in the mutation response. Do not call ",{"type":46,"tag":61,"props":2499,"children":2501},{"className":2500},[],[2502],{"type":52,"value":2503},"refetch()",{"type":52,"value":2505},"\nor ",{"type":46,"tag":61,"props":2507,"children":2509},{"className":2508},[],[2510],{"type":52,"value":2511},"fetchQuery()",{"type":52,"value":2513}," when the store update is sufficient.",{"type":46,"tag":111,"props":2515,"children":2517},{"className":503,"code":2516,"language":25,"meta":119,"style":119},"# GOOD: updated data comes back with the mutation response\nmutation UpdateUserMutation($input: UpdateUserInput!) {\n  updateUser(input: $input) {\n    user {\n      ...UserProfile_user\n      ...UserAvatar_user\n    }\n  }\n}\n\n# BAD: requires a separate round-trip after mutation\nmutation UpdateUserMutation($input: UpdateUserInput!) {\n  updateUser(input: $input) {\n    user { id }\n  }\n}\n",[2518],{"type":46,"tag":61,"props":2519,"children":2520},{"__ignoreMap":119},[2521,2529,2537,2545,2553,2561,2569,2576,2583,2590,2597,2605,2612,2619,2627,2634],{"type":46,"tag":158,"props":2522,"children":2523},{"class":160,"line":161},[2524],{"type":46,"tag":158,"props":2525,"children":2526},{},[2527],{"type":52,"value":2528},"# GOOD: updated data comes back with the mutation response\n",{"type":46,"tag":158,"props":2530,"children":2531},{"class":160,"line":171},[2532],{"type":46,"tag":158,"props":2533,"children":2534},{},[2535],{"type":52,"value":2536},"mutation UpdateUserMutation($input: UpdateUserInput!) {\n",{"type":46,"tag":158,"props":2538,"children":2539},{"class":160,"line":228},[2540],{"type":46,"tag":158,"props":2541,"children":2542},{},[2543],{"type":52,"value":2544},"  updateUser(input: $input) {\n",{"type":46,"tag":158,"props":2546,"children":2547},{"class":160,"line":238},[2548],{"type":46,"tag":158,"props":2549,"children":2550},{},[2551],{"type":52,"value":2552},"    user {\n",{"type":46,"tag":158,"props":2554,"children":2555},{"class":160,"line":247},[2556],{"type":46,"tag":158,"props":2557,"children":2558},{},[2559],{"type":52,"value":2560},"      ...UserProfile_user\n",{"type":46,"tag":158,"props":2562,"children":2563},{"class":160,"line":312},[2564],{"type":46,"tag":158,"props":2565,"children":2566},{},[2567],{"type":52,"value":2568},"      ...UserAvatar_user\n",{"type":46,"tag":158,"props":2570,"children":2571},{"class":160,"line":334},[2572],{"type":46,"tag":158,"props":2573,"children":2574},{},[2575],{"type":52,"value":1727},{"type":46,"tag":158,"props":2577,"children":2578},{"class":160,"line":369},[2579],{"type":46,"tag":158,"props":2580,"children":2581},{},[2582],{"type":52,"value":556},{"type":46,"tag":158,"props":2584,"children":2585},{"class":160,"line":403},[2586],{"type":46,"tag":158,"props":2587,"children":2588},{},[2589],{"type":52,"value":564},{"type":46,"tag":158,"props":2591,"children":2592},{"class":160,"line":436},[2593],{"type":46,"tag":158,"props":2594,"children":2595},{"emptyLinePlaceholder":232},[2596],{"type":52,"value":235},{"type":46,"tag":158,"props":2598,"children":2599},{"class":160,"line":454},[2600],{"type":46,"tag":158,"props":2601,"children":2602},{},[2603],{"type":52,"value":2604},"# BAD: requires a separate round-trip after mutation\n",{"type":46,"tag":158,"props":2606,"children":2607},{"class":160,"line":471},[2608],{"type":46,"tag":158,"props":2609,"children":2610},{},[2611],{"type":52,"value":2536},{"type":46,"tag":158,"props":2613,"children":2614},{"class":160,"line":892},[2615],{"type":46,"tag":158,"props":2616,"children":2617},{},[2618],{"type":52,"value":2544},{"type":46,"tag":158,"props":2620,"children":2621},{"class":160,"line":908},[2622],{"type":46,"tag":158,"props":2623,"children":2624},{},[2625],{"type":52,"value":2626},"    user { id }\n",{"type":46,"tag":158,"props":2628,"children":2629},{"class":160,"line":921},[2630],{"type":46,"tag":158,"props":2631,"children":2632},{},[2633],{"type":52,"value":556},{"type":46,"tag":158,"props":2635,"children":2636},{"class":160,"line":1658},[2637],{"type":46,"tag":158,"props":2638,"children":2639},{},[2640],{"type":52,"value":564},{"type":46,"tag":55,"props":2642,"children":2643},{},[2644,2645,2651,2653,2659],{"type":52,"value":487},{"type":46,"tag":61,"props":2646,"children":2648},{"className":2647},[],[2649],{"type":52,"value":2650},"fetchKey",{"type":52,"value":2652}," sparingly — changing it forces a full network round trip.\nReserve ",{"type":46,"tag":61,"props":2654,"children":2656},{"className":2655},[],[2657],{"type":52,"value":2658},"refetchQueries",{"type":52,"value":2660}," \u002F manual refetch for cases where the mutation's side\neffects are too broad to capture in the response payload.",{"type":46,"tag":91,"props":2662,"children":2664},{"id":2663},"fetch-only-what-you-need",[2665],{"type":52,"value":2666},"Fetch Only What You Need",{"type":46,"tag":55,"props":2668,"children":2669},{},[2670,2672,2678],{"type":52,"value":2671},"Each fragment should request only the fields the component actually renders.\nDo not add fields \"just in case\" — unused fields increase payload size and slow\ndown parsing and normalization. Relay's ",{"type":46,"tag":61,"props":2673,"children":2675},{"className":2674},[],[2676],{"type":52,"value":2677},"unused-fields",{"type":52,"value":2679}," lint rule catches this.",{"type":46,"tag":55,"props":2681,"children":2682},{},[2683,2685,2690],{"type":52,"value":2684},"If a child component needs more data, add a fragment ",{"type":46,"tag":103,"props":2686,"children":2687},{},[2688],{"type":52,"value":2689},"to the child",{"type":52,"value":2691}," and\nspread it in the parent — do not widen the parent's fragment.",{"type":46,"tag":2693,"props":2694,"children":2695},"style",{},[2696],{"type":52,"value":2697},"html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"items":2699,"total":2250},[2700,2713,2721,2742,2763,2780,2791,2811,2824,2839,2851,2861],{"slug":66,"name":66,"fn":2701,"description":2702,"org":2703,"tags":2704,"stars":29,"repoUrl":30,"updatedAt":2712},"write idiomatic Relay code","Best practices for writing idiomatic Relay code. ALWAYS use this skill when writing or modifying React components that use Relay for data fetching. Covers fragments, queries, mutations, pagination, and common anti-patterns. Use when you see `useFragment`, `useLazyLoadQuery`, `usePreloadedQuery`, `useMutation`, `usePaginationFragment`, `graphql` template literals, `react-relay` imports, or `__generated__\u002F*.graphql` files. Also use when asked to explain Relay concepts, debug Relay issues, or review Relay code.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[2705,2708,2709,2710,2711],{"name":2706,"slug":2707,"type":16},"Engineering","engineering",{"name":27,"slug":28,"type":16},{"name":24,"slug":25,"type":16},{"name":18,"slug":19,"type":16},{"name":21,"slug":22,"type":16},"2026-04-22T04:58:15.370563",{"slug":4,"name":4,"fn":5,"description":6,"org":2714,"tags":2715,"stars":29,"repoUrl":30,"updatedAt":31},{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[2716,2717,2718,2719,2720],{"name":27,"slug":28,"type":16},{"name":24,"slug":25,"type":16},{"name":14,"slug":15,"type":16},{"name":18,"slug":19,"type":16},{"name":21,"slug":22,"type":16},{"slug":2722,"name":2722,"fn":2723,"description":2724,"org":2725,"tags":2726,"stars":2739,"repoUrl":2740,"updatedAt":2741},"add-shape-types-to-torch-model","annotate PyTorch models with tensor shapes","Port a PyTorch model to use pyrefly's tensor shape type system (Tensor[[B, C, H, W]], Int[T]). Use this skill whenever the user wants to add shape annotations to a PyTorch model, type a model with tensor dimensions, port a model to use shape tracking, or annotate model forward methods with tensor shapes. Also use when the user mentions tensor shape ports, Int types for PyTorch, or pyrefly shape checking on a model file. Invoke BEFORE starting any model port — the skill's gated workflow prevents common failure modes.\n",{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[2727,2730,2733,2736],{"name":2728,"slug":2729,"type":16},"Data Modeling","data-modeling",{"name":2731,"slug":2732,"type":16},"Deep Learning","deep-learning",{"name":2734,"slug":2735,"type":16},"Python","python",{"name":2737,"slug":2738,"type":16},"PyTorch","pytorch",6833,"https:\u002F\u002Fgithub.com\u002Ffacebook\u002Fpyrefly","2026-07-18T05:12:08.515952",{"slug":2743,"name":2743,"fn":2744,"description":2745,"org":2746,"tags":2747,"stars":2760,"repoUrl":2761,"updatedAt":2762},"camera-streaming","configure camera streaming and photo capture","Stream, video frames, photo capture, resolution\u002Fframe rate configuration",{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[2748,2751,2754,2757],{"name":2749,"slug":2750,"type":16},"Camera","camera",{"name":2752,"slug":2753,"type":16},"Hardware","hardware",{"name":2755,"slug":2756,"type":16},"iOS","ios",{"name":2758,"slug":2759,"type":16},"Video","video",488,"https:\u002F\u002Fgithub.com\u002Ffacebook\u002Fmeta-wearables-dat-ios","2026-05-15T06:14:43.555881",{"slug":2764,"name":2764,"fn":2765,"description":2766,"org":2767,"tags":2768,"stars":2760,"repoUrl":2761,"updatedAt":2779},"dat-conventions","develop iOS applications with DAT SDK","Swift patterns, async\u002Fawait, naming conventions, key types for DAT SDK iOS development",{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[2769,2770,2773,2776],{"name":2755,"slug":2756,"type":16},{"name":2771,"slug":2772,"type":16},"Mobile","mobile",{"name":2774,"slug":2775,"type":16},"SDK","sdk",{"name":2777,"slug":2778,"type":16},"Swift","swift","2026-05-15T06:14:42.334435",{"slug":2781,"name":2781,"fn":2782,"description":2783,"org":2784,"tags":2785,"stars":2760,"repoUrl":2761,"updatedAt":2790},"debugging","debug wearable device software","Common issues, Developer Mode, version compatibility, state machine diagnosis",{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[2786,2788,2789],{"name":2787,"slug":2781,"type":16},"Debugging",{"name":2706,"slug":2707,"type":16},{"name":2755,"slug":2756,"type":16},"2026-05-15T06:14:38.626606",{"slug":2792,"name":2792,"fn":2793,"description":2794,"org":2795,"tags":2796,"stars":2760,"repoUrl":2761,"updatedAt":2810},"display-access","manage display capabilities on wearable devices","Display capability setup, display-capable device selection, UI DSL, icons, buttons, images, and video playback",{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[2797,2800,2803,2806,2809],{"name":2798,"slug":2799,"type":16},"Design","design",{"name":2801,"slug":2802,"type":16},"Images","images",{"name":2804,"slug":2805,"type":16},"Interaction","interaction",{"name":2807,"slug":2808,"type":16},"UI Components","ui-components",{"name":2758,"slug":2759,"type":16},"2026-05-15T06:14:39.844502",{"slug":2812,"name":2812,"fn":2813,"description":2814,"org":2815,"tags":2816,"stars":2760,"repoUrl":2761,"updatedAt":2823},"getting-started","set up Meta wearable SDK integration","SDK setup, Swift Package Manager integration, Info.plist configuration, and first connection to Meta glasses",{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[2817,2820,2821,2822],{"name":2818,"slug":2819,"type":16},"Configuration","configuration",{"name":2755,"slug":2756,"type":16},{"name":2774,"slug":2775,"type":16},{"name":2777,"slug":2778,"type":16},"2026-05-15T06:14:41.086639",{"slug":2825,"name":2825,"fn":2826,"description":2827,"org":2828,"tags":2829,"stars":2760,"repoUrl":2761,"updatedAt":2838},"mockdevice-testing","test wearable apps with mock devices","MockDeviceKit for testing without physical glasses hardware",{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[2830,2831,2832,2835],{"name":2755,"slug":2756,"type":16},{"name":2771,"slug":2772,"type":16},{"name":2833,"slug":2834,"type":16},"QA","qa",{"name":2836,"slug":2837,"type":16},"Testing","testing","2026-05-15T06:14:37.406692",{"slug":2840,"name":2840,"fn":2841,"description":2842,"org":2843,"tags":2844,"stars":2760,"repoUrl":2761,"updatedAt":2850},"permissions-registration","register apps with Meta AI","App registration with Meta AI, camera permission flows",{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[2845,2846,2847],{"name":2749,"slug":2750,"type":16},{"name":2755,"slug":2756,"type":16},{"name":2848,"slug":2849,"type":16},"Permissions","permissions","2026-05-15T06:14:46.030253",{"slug":2852,"name":2852,"fn":2853,"description":2854,"org":2855,"tags":2856,"stars":2760,"repoUrl":2761,"updatedAt":2860},"sample-app-guide","build wearable apps with camera streaming","Building a complete DAT app with camera streaming and photo capture",{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[2857,2858,2859],{"name":2749,"slug":2750,"type":16},{"name":2755,"slug":2756,"type":16},{"name":2771,"slug":2772,"type":16},"2026-05-15T06:14:36.185947",{"slug":2862,"name":2862,"fn":2863,"description":2864,"org":2865,"tags":2866,"stars":2760,"repoUrl":2761,"updatedAt":2873},"session-lifecycle","monitor device session lifecycle states","Device session states, pause\u002Fresume, availability monitoring",{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[2867,2868,2869,2872],{"name":2755,"slug":2756,"type":16},{"name":2771,"slug":2772,"type":16},{"name":2870,"slug":2871,"type":16},"Monitoring","monitoring",{"name":14,"slug":15,"type":16},"2026-05-15T06:14:44.790925",{"items":2875,"total":171},[2876,2884],{"slug":66,"name":66,"fn":2701,"description":2702,"org":2877,"tags":2878,"stars":29,"repoUrl":30,"updatedAt":2712},{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[2879,2880,2881,2882,2883],{"name":2706,"slug":2707,"type":16},{"name":27,"slug":28,"type":16},{"name":24,"slug":25,"type":16},{"name":18,"slug":19,"type":16},{"name":21,"slug":22,"type":16},{"slug":4,"name":4,"fn":5,"description":6,"org":2885,"tags":2886,"stars":29,"repoUrl":30,"updatedAt":31},{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[2887,2888,2889,2890,2891],{"name":27,"slug":28,"type":16},{"name":24,"slug":25,"type":16},{"name":14,"slug":15,"type":16},{"name":18,"slug":19,"type":16},{"name":21,"slug":22,"type":16}]