https://relay.dev/assets/js/8d61712b.46283bfa.js

1"use strict";(self.webpackChunk=self.webpackChunk||[]).push([["13965"],{94024(e,t,n){n.r(t),n.d(t,{metadata:()=>a,default:()=>m,frontMatter:()=>o,contentTitle:()=>c,toc:()=>h,assets:()=>d});var a=JSON.parse('{"id":"community/learning-resources","title":"Community Learning Resources","description":"Guides and articles:","source":"@site/docs/community/learning-resources.mdx","sourceDirName":"community","slug":"/community-learning-resources/","permalink":"/docs/next/community-learning-resources/","draft":false,"unlisted":false,"editUrl":"https://github.com/facebook/relay/tree/main/website/docs/community/learning-resources.mdx","tags":[],"version":"current","frontMatter":{"id":"learning-resources","title":"Community Learning Resources","slug":"/community-learning-resources/"},"sidebar":"docs","previous":{"title":"Videos","permalink":"/docs/next/principles-and-architecture/videos/"},"next":{"title":"Glossary","permalink":"/docs/next/glossary/"}}'),i=n(74848),r=n(28453);n(66497);var s=n(86898),l=n(17352);let o={id:"learning-resources",title:"Community Learning Resources",slug:"/community-learning-resources/"},c,d={},h=[{value:"Guides and articles:",id:"guides-and-articles",level:2},{value:"Relay example projects",id:"relay-example-projects",level:2},{value:"Learn basics",id:"learn-basics",level:2},{value:"About Relay Store",id:"about-relay-store",level:2},{value:"Network Layer",id:"network-layer",level:2},{value:"Relay Configuration",id:"relay-configuration",level:2},{value:"Miscellaneous",id:"miscellaneous",level:2}];function u(e){let t={a:"a",h2:"h2",li:"li",p:"p",ul:"ul",...(0,r.R)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(t.h2,{id:"guides-and-articles",children:"Guides and articles:"}),"\n",(0,i.jsxs)(t.ul,{children:["\n",(0,i.jsxs)(t.li,{children:[(0,i.jsx)(t.a,{href:"https://medium.com/entria/relay-modern-argumentdefinitions-d53769dbb95d",children:"How to use @argumentsDefinitions to define local variables to your fragments"})," (by Entria)"]}),"\n",(0,i.jsxs)(t.li,{children:[(0,i.jsx)(t.a,{href:"https://medium.com/entria/wrangling-the-client-store-with-the-relay-modern-updater-function-5c32149a71ac",children:"Deep Dive of Updater Relay Store function. How to update your store properly after a mutation or subscription"})," (by Entria)"]}),"\n",(0,i.jsxs)(t.li,{children:[(0,i.jsx)(t.a,{href:"https://medium.com/entria/relay-modern-optimistic-update-a09ba22d83c9",children:"Optimistic Update: how to update your UI before server responds"})," (by Entria)"]}),"\n",(0,i.jsxs)(t.li,{children:[(0,i.jsx)(t.a,{href:"https://medium.com/entria/relay-modern-network-deep-dive-ec187629dfd3",children:"Relay Network Deep Dive - how to incrementally improve your network layer to manage complex data fetching requirements"})," (by Entria)"]}),"\n",(0,i.jsxs)(t.li,{children:[(0,i.jsx)(t.a,{href:"https://medium.com/@sibelius/relay-modern-migration-to-typescript-c26ab0ee749c",children:"Relay Modern with TypeScript - how to configure Relay Modern to make it with TypeScript"})," (by @sibelius)"]}),"\n",(0,i.jsx)(t.li,{children:(0,i.jsx)(t.a,{href:"https://mrtnzlml.com/docs/relay",children:"Collection of random thoughts and discoveries around Relay"})}),"\n"]}),"\n",(0,i.jsxs)(l.OssOnly,{children:[(0,i.jsx)(t.h2,{id:"relay-example-projects",children:"Relay example projects"}),(0,i.jsx)(t.p,{children:"These projects serve as an example of how to use Relay in real world applications. Some of them are even with educational videos."}),(0,i.jsxs)(t.ul,{children:["\n",(0,i.jsx)(t.li,{children:(0,i.jsx)(t.a,{href:"https://github.com/relayjs/relay-examples",children:"github.com/relayjs/relay-examples"})}),"\n",(0,i.jsx)(t.li,{children:(0,i.jsx)(t.a,{href:"https://github.com/adeira/relay-example",children:"github.com/adeira/relay-example"})}),"\n",(0,i.jsx)(t.li,{children:(0,i.jsx)(t.a,{href:"https://github.com/juffalow/react-relay-example",children:"github.com/juffalow/react-relay-example"})}),"\n"]}),(0,i.jsx)(t.h2,{id:"learn-basics",children:"Learn basics"}),(0,i.jsx)(t.p,{children:"Here, you will find articles written by the Relay community. They touch on basic topics that are necessary for daily work."}),(0,i.jsxs)(t.ul,{children:["\n",(0,i.jsxs)(t.li,{children:[(0,i.jsx)(t.a,{href:"https://medium.com/@sibelius/relay-modern-what-is-a-fragment-c70f164c2469",children:"What is a fragment? Basic explanation of what is a fragment and what it is used for"})," (by @sibelius)"]}

1),"\n",(0,i.jsxs)(t.li,{children:[(0,i.jsx)(t.a,{href:"https://medium.com/entria/relay-apollo-anti-pattern-d9f4dea47738",children:"Relay anti-patterns. What you should avoid doing when using Relay concepts"})," (by Entria)"]}),"\n",(0,i.jsxs)(t.li,{children:[(0,i.jsx)(t.a,{href:"https://medium.com/entria/relay-is-just-getting-better-54112ffc1a9e",children:"Insights of how Relay Modern has improved a lot since Relay Classic"})," (by Entria)"]}),"\n",(0,i.jsxs)(t.li,{children:[(0,i.jsx)(t.a,{href:"https://medium.com/entria/relay-modern-argumentdefinitions-d53769dbb95d",children:"How to use @argumentsDefinitions to define local variables to your fragments"})," (by Entria)"]}),"\n",(0,i.jsxs)(t.li,{children:[(0,i.jsx)(t.a,{href:"https://medium.com/entria/relay-modern-pagination-using-refetch-container-editing-a07c6b33ae4e",children:"How to paginate using a Refetch Container. You can use a refetch container to paginate as well, just use renderVariables correctly"})," (by Entria)"]}),"\n"]}),(0,i.jsx)(t.h2,{id:"about-relay-store",children:"About Relay Store"}),(0,i.jsxs)(t.ul,{children:["\n",(0,i.jsxs)(t.li,{children:[(0,i.jsx)(t.a,{href:"https://medium.com/@sibelius/relay-modern-the-relay-store-8984cd148798",children:"How Relay Modern stores your data"})," (by @sibelius)"]}),"\n",(0,i.jsxs)(t.li,{children:[(0,i.jsx)(t.a,{href:"https://medium.com/entria/wrangling-the-client-store-with-the-relay-modern-updater-function-5c32149a71ac",children:"Deep Dive of Updater Relay Store function. How to update your store properly after a mutation or subscription"})," (by Entria)"]}),"\n",(0,i.jsxs)(t.li,{children:[(0,i.jsx)(t.a,{href:"https://medium.com/entria/relay-modern-optimistic-update-a09ba22d83c9",children:"Optimistic Update: how to update your UI before server responds"})," (by Entria)"]}),"\n",(0,i.jsxs)(t.li,{children:[(0,i.jsx)(t.a,{href:"https://babangsund.com/relay_local_state_management/",children:"Local State Management, part 1 - how to create a controlled input using Relay"})," (by @babangsund)"]}),"\n",(0,i.jsxs)(t.li,{children:[(0,i.jsx)(t.a,{href:"https://babangsund.com/relay_local_state_management_2/",children:"Local State Management, part 2 - how to manage global state and localStorage persistence on the client, using Relay"})," (by @babangsund)"]}),"\n",(0,i.jsxs)(t.li,{children:[(0,i.jsx)(t.a,{href:"https://babangsund.com/relay_local_state_management_3/",children:"Local State Management, part 3 - using LocalQueryRenderer and local state to manage nested fragments"})," (by @babangsund)"]}),"\n"]}),(0,i.jsx)(t.h2,{id:"network-layer",children:"Network Layer"}),(0,i.jsxs)(t.ul,{children:["\n",(0,i.jsxs)(t.li,{children:[(0,i.jsx)(t.a,{href:"https://medium.com/entria/relay-modern-network-deep-dive-ec187629dfd3",children:"Relay Network Deep Dive - how to incrementally improve your network layer to manage complex data fetching requirements"})," (by Entria)"]}),"\n"]}),(0,i.jsx)(t.h2,{id:"relay-configuration",children:"Relay Configuration"}),(0,i.jsxs)(t.ul,{children:["\n",(0,i.jsxs)(t.li,{children:[(0,i.jsx)(t.a,{href:"https://medium.com/@sibelius/relay-modern-migration-to-typescript-c26ab0ee749c",children:"Relay Modern with TypeScript - how to configure Relay Modern to make it with TypeScript"})," (by @sibelius)"]}),"\n"]}),(0,i.jsx)(t.h2,{id:"miscellaneous",children:"Miscellaneous"}),(0,i.jsxs)(t.ul,{children:["\n",(0,i.jsx)(t.li,{children:(0,i.jsx)(t.a,{href:"https://twitter.com/sseraphini/status/1078595758801203202",children:"Relay Modern Learning Blog Posts Thread on Twitter"})}),"\n",(0,i.jsx)(t.li,{children:(0,i.jsx)(t.a,{href:"https://mrtnzlml.com/docs/relay",children:"Collection of random thoughts and discoveries around Relay"})}),"\n"]})]}),"\n",(0,i.jsx)(s.A,{})]})}function m(e={}){let{wrapper:t}={...(0,r.R)(),...e.components};return t?(0,i.jsx)(t,{...e,children:(0,i.jsx)(u,{...e})}):u(e)}},86898(e,t,n){n.d(t,{A:()=>p});var a=n(74848),i=n(95310),r=n(17352),s=n(96540);function l(){let e=window.encodeURI(JSON.stringify({title:"Feedback about "+window.location.pathname,description:"**!!! Required !!!**\n\nPlease modify the task description to let us know how the docs can be improved.\n\n**Please do not ask support questions via this form! Instead, ask in fburl.com/relay_

1support**",tag_ids:{add:[0xac96423e5b680,0x64079768ac750]}}));window.open("https://www.internalfb.com/tasks/?n="+e)}function o({children:e}){return(0,a.jsxs)("div",{className:"docsRating",id:"docsRating",children:[(0,a.jsx)("hr",{}),e]})}let c=()=>{let[e,t]=s.useState(!1),n=e=>{t(!0),window.ga&&window.ga("send",{hitType:"event",eventCategory:"button",eventAction:"feedback",eventValue:e})};return e?"Thank you for letting us know!":(0,a.jsxs)(a.Fragment,{children:["Is this page useful?",(0,a.jsx)("svg",{className:"i_thumbsup",alt:"Like",id:"docsRating-like",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 81.13 89.76",onClick:()=>n(1),children:(0,a.jsx)("path",{d:"M22.9 6a18.57 18.57 0 002.67 8.4 25.72 25.72 0 008.65 7.66c3.86 2 8.67 7.13 13.51 11 3.86 3.11 8.57 7.11 11.54 8.45s13.59.26 14.64 1.17c1.88 1.63 1.55 9-.11 15.25-1.61 5.86-5.96 10.55-6.48 16.86-.4 4.83-2.7 4.88-10.93 4.88h-1.35c-3.82 0-8.24 2.93-12.92 3.62a68 68 0 01-9.73.5c-3.57 0-7.86-.08-13.25-.08-3.56 0-4.71-1.83-4.71-4.48h8.42a3.51 3.51 0 000-7H12.28a2.89 2.89 0 01-2.88-2.88 1.91 1.91 0 01.77-1.78h16.46a3.51 3.51 0 000-7H12.29c-3.21 0-4.84-1.83-4.84-4a6.41 6.41 0 011.17-3.78h19.06a3.5 3.5 0 100-7H9.75A3.51 3.51 0 016 42.27a3.45 3.45 0 013.75-3.48h13.11c5.61 0 7.71-3 5.71-5.52-4.43-4.74-10.84-12.62-11-18.71-.15-6.51 2.6-7.83 5.36-8.56m0-6a6.18 6.18 0 00-1.53.2c-6.69 1.77-10 6.65-9.82 14.5.08 5.09 2.99 11.18 8.52 18.09H9.74a9.52 9.52 0 00-6.23 16.9 12.52 12.52 0 00-2.07 6.84 9.64 9.64 0 003.65 7.7 7.85 7.85 0 00-1.7 5.13 8.9 8.9 0 005.3 8.13 6 6 0 00-.26 1.76c0 6.37 4.2 10.48 10.71 10.48h13.25a73.75 73.75 0 0010.6-.56 35.89 35.89 0 007.58-2.18 17.83 17.83 0 014.48-1.34h1.35c4.69 0 7.79 0 10.5-1 3.85-1.44 6-4.59 6.41-9.38.2-2.46 1.42-4.85 2.84-7.62a41.3 41.3 0 003.42-8.13 48 48 0 001.59-10.79c.1-5.13-1-8.48-3.35-10.55-2.16-1.87-4.64-1.87-9.6-1.88a46.86 46.86 0 01-6.64-.29c-1.92-.94-5.72-4-8.51-6.3l-1.58-1.28c-1.6-1.3-3.27-2.79-4.87-4.23-3.33-3-6.47-5.79-9.61-7.45a20.2 20.2 0 01-6.43-5.53 12.44 12.44 0 01-1.72-5.36 6 6 0 00-6-5.86z"})}),(0,a.jsx)("svg",{className:"i_thumbsdown",alt:"Dislike",id:"docsRating-dislike",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 81.13 89.76",onClick:()=>n(0),children:(0,a.jsx)("path",{d:"M22.9 6a18.57 18.57 0 002.67 8.4 25.72 25.72 0 008.65 7.66c3.86 2 8.67 7.13 13.51 11 3.86 3.11 8.57 7.11 11.54 8.45s13.59.26 14.64 1.17c1.88 1.63 1.55 9-.11 15.25-1.61 5.86-5.96 10.55-6.48 16.86-.4 4.83-2.7 4.88-10.93 4.88h-1.35c-3.82 0-8.24 2.93-12.92 3.62a68 68 0 01-9.73.5c-3.57 0-7.86-.08-13.25-.08-3.56 0-4.71-1.83-4.71-4.48h8.42a3.51 3.51 0 000-7H12.28a2.89 2.89 0 01-2.88-2.88 1.91 1.91 0 01.77-1.78h16.46a3.51 3.51 0 000-7H12.29c-3.21 0-4.84-1.83-4.84-4a6.41 6.41 0 011.17-3.78h19.06a3.5 3.5 0 100-7H9.75A3.51 3.51 0 016 42.27a3.45 3.45 0 013.75-3.48h13.11c5.61 0 7.71-3 5.71-5.52-4.43-4.74-10.84-12.62-11-18.71-.15-6.51 2.6-7.83 5.36-8.56m0-6a6.18 6.18 0 00-1.53.2c-6.69 1.77-10 6.65-9.82 14.5.08 5.09 2.99 11.18 8.52 18.09H9.74a9.52 9.52 0 00-6.23 16.9 12.52 12.52 0 00-2.07 6.84 9.64 9.64 0 003.65 7.7 7.85 7.85 0 00-1.7 5.13 8.9 8.9 0 005.3 8.13 6 6 0 00-.26 1.76c0 6.37 4.2 10.48 10.71 10.48h13.25a73.75 73.75 0 0010.6-.56 35.89 35.89 0 007.58-2.18 17.83 17.83 0 014.48-1.34h1.35c4.69 0 7.79 0 10.5-1 3.85-1.44 6-4.59 6.41-9.38.2-2.46 1.42-4.85 2.84-7.62a41.3 41.3 0 003.42-8.13 48 48 0 001.59-10.79c.1-5.13-1-8.48-3.35-10.55-2.16-1.87-4.64-1.87-9.6-1.88a46.86 46.86 0 01-6.64-.29c-1.92-.94-5.72-4-8.51-6.3l-1.58-1.28c-1.6-1.3-3.27-2.79-4.87-4.23-3.33-3-6.47-5.79-9.61-7.45a20.2 20.2 0 01-6.43-5.53 12.44 12.44 0 01-1.72-5.36 6 6 0 00-6-5.86z"})})]})},d=()=>(0,a.jsxs)("p",{children:["Let us know how these docs can be improved by",(0,a.jsx)("a",{className:"button",role:"button",tabIndex:0,onClick:l,children:"Filing a task"})]}),h=()=>(0,a.jsxs)("p",{children:["Help us make the site even better by"," ",(0,a.jsx)(i.default,{to:"https://www.surveymonkey.com/r/FYC9TCJ",children:"answering a few quick questions"}),"."]}),u=()=>(0,a.jsxs)(o,{children:[(0,a.jsx)(d,{}),(0,a.jsx)(c,{}),(0,a.jsx)(h,{})]}),m=()=>(0,a.jsxs)(o,{children:[(0,a.jsx)(c,{}),(0,a.jsx)(h,{})]}),p=()=>(0,r.fbContent)({internal:(0,a.jsx)(u,{}),external:(0,a.jsx)(m,{})})},28453(e,t,n){n.d(t,{R:()=>s,x:()=>l});var a=n(96540);let i={},r=a.createContext(i);function s(e){let t=a.useContext(r);return a.useMemo(function(){return"function"==typeof e?e(t):{...t,...e}},[t,e])}function l(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(i):e.components||i:s(e.components),a.createElement(r.Provider,{value:t},e.children)}}}]);