https://relay.dev/assets/js/6232821c.6a4c9b91.js

1"use strict";(self.webpackChunk=self.webpackChunk||[]).push([["10367"],{21294(e,t,s){s.r(t),s.d(t,{metadata:()=>a,default:()=>p,frontMatter:()=>l,contentTitle:()=>o,toc:()=>h,assets:()=>c});var a=JSON.parse('{"id":"getting-started/prerequisites","title":"Prerequisites","description":"Prerequisites for setting up Relay","source":"@site/versioned_docs/version-v18.0.0/getting-started/prerequisites.md","sourceDirName":"getting-started","slug":"/getting-started/prerequisites/","permalink":"/docs/v18.0.0/getting-started/prerequisites/","draft":false,"unlisted":false,"editUrl":"https://github.com/facebook/relay/tree/main/website/versioned_docs/version-v18.0.0/getting-started/prerequisites.md","tags":[],"version":"v18.0.0","frontMatter":{"id":"prerequisites","title":"Prerequisites","slug":"/getting-started/prerequisites/","description":"Prerequisites for setting up Relay","keywords":["prerequisites"]},"sidebar":"docs","previous":{"title":"Home","permalink":"/docs/v18.0.0/"},"next":{"title":"Installing in a Project","permalink":"/docs/v18.0.0/getting-started/installation-and-setup/"}}'),r=s(74848),n=s(28453),i=s(86898);s(17352);let l={id:"prerequisites",title:"Prerequisites",slug:"/getting-started/prerequisites/",description:"Prerequisites for setting up Relay",keywords:["prerequisites"]},o,c={},h=[{value:"JavaScript",id:"javascript",level:2},{value:"React",id:"react",level:2},{value:"GraphQL",id:"graphql",level:2},{value:"A GraphQL Schema",id:"a-graphql-schema",level:3},{value:"A GraphQL Server",id:"a-graphql-server",level:3}];function d(e){let t={a:"a",h2:"h2",h3:"h3",li:"li",p:"p",strong:"strong",ul:"ul",...(0,n.R)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(t.p,{children:"Before getting started with Relay, bear in mind that we assume that the following infrastructure has already been set up, as well as some level of familiarity with the topics below."}),"\n",(0,r.jsx)(t.h2,{id:"javascript",children:"JavaScript"}),"\n",(0,r.jsx)(t.p,{children:"Relay is a framework built in JavaScript, so we assume familiarity with the JavaScript language."}),"\n",(0,r.jsx)(t.h2,{id:"react",children:"React"}),"\n",(0,r.jsxs)(t.p,{children:["Relay is a framework for data management with the primary supported binding for React applications, so we assume that you are already familiar with ",(0,r.jsx)(t.a,{href:"https://reactjs.org/",children:"React"}),"."]}),"\n",(0,r.jsx)(t.h2,{id:"graphql",children:"GraphQL"}),"\n",(0,r.jsxs)(t.p,{children:["We also assume basic understanding of ",(0,r.jsx)(t.a,{href:"http://graphql.org/learn/",children:"GraphQL"}),". In order to start using Relay, you will also need:"]}),"\n",(0,r.jsx)(t.h3,{id:"a-graphql-schema",children:"A GraphQL Schema"}),"\n",(0,r.jsx)(t.p,{children:"A description of your data model with an associated set of resolve methods that know how to fetch any data your application could ever need."}),"\n",(0,r.jsxs)(t.p,{children:["GraphQL is designed to support a wide range of data access patterns. In order to understand the structure of an application's data, Relay requires that you follow certain conventions when defining your schema. These are documented in the ",(0,r.jsx)(t.a,{href:"../../guides/graphql-server-specification",children:"GraphQL Server Specification"}),"."]}),"\n",(0,r.jsxs)(t.ul,{children:["\n",(0,r.jsxs)(t.li,{children:["\n",(0,r.jsxs)(t.p,{children:[(0,r.jsx)(t.strong,{children:(0,r.jsx)(t.a,{href:"https://github.com/graphql/graphql-js",children:"graphql-js"})})," on ",(0,r.jsx)(t.a,{href:"https://www.npmjs.com/package/graphql",children:"npm"})]}),"\n",(0,r.jsx)(t.p,{children:"General-purpose tools for building a GraphQL schema using JavaScript"}),"\n"]}),"\n",(0,r.jsxs)(t.li,{children:["\n",(0,r.jsxs)(t.p,{children:[(0,r.jsx)(t.strong,{children:(0,r.jsx)(t.a,{href:"https://github.com/graphql/graphql-relay-js",children:"graphql-relay-js"})})," on ",(0,r.jsx)(t.a,{href:"https://www.npmjs.com/package/graphql-relay",children:"npm"})]}),"\n",(0,r.jsx)(t.p,{children:"JavaScript helpers for defining connections between data, and mutations, in a way that smoothly integrates with Relay."}),"\n"]}),"\n"]}),"\n",(0,r.jsx)(t.h3,{id:"a-graphql-server",children:"A GraphQL Server"}),"\n",(0,r.jsxs)(t.p,{children:["Any server can be taught to load a schema and speak GraphQL. Our ",(0,r.jsx)(t.a,{href:"https://github.com/relayjs/relay-examples",children:"examples"})," use Express."]}),"\n",(0,r.jsxs)(t.ul,{children:["\n",(0,r.jsxs)(t.li,{children:[(0,r.jsx)(t.strong,{children:(0,r.jsx)(t.a,{href:"https://github.com/graphql/express-graphql",children:"express-graphql"})})," on ",(0,r.jsx)(t.a,{href:"https://www.npmjs.com/package/express-graphql",children:"npm"})]}),"\n"]}),"\n",(0,r.jsx)(i.A,{})]})}function p(e={}){let{wrapper:t}={...(0,n.R)(),...e.components};return t?(0,r.jsx)(t,{...e,children:(0,r.jsx)(d,{...e})}):d(e)}}

1,86898(e,t,s){s.d(t,{A:()=>g});var a=s(74848),r=s(95310),n=s(17352),i=s(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_support**",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]=i.useState(!1),s=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:()=>s(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:()=>s(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"})})]})},h=()=>(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"})]}),d=()=>(0,a.jsxs)("p",{children:["Help us make the site even better by"," ",(0,a.jsx)(r.default,{to:"https://www.surveymonkey.com/r/FYC9TCJ",children:"answering a few quick questions"}),"."]}),p=()=>(0,a.jsxs)(o,{children:[(0,a.jsx)(h,{}),(0,a.jsx)(c,{}),(0,a.jsx)(d,{})]}),u=()=>(0,a.jsxs)(o,{children:[(0,a.jsx)(c,{}),(0,a.jsx)(d,{})]}),g=()=>(0,n.fbContent)({internal:(0,a.jsx)(p,{}),external:(0,a.jsx)(u,{})})},28453(e,t,s){s.d(t,{R:()=>i,x:()=>l});var a=s(96540);let r={},n=a.createContext(r);function i(e){let t=a.useContext(n);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(r):e.components||r:i(e.components),a.createElement(n.Provider,{value:t},e.children)}}}]);