React Architecture at Product Hunt

What is the architecture at our latest product YourStack.

Transcript

1. Product Hunt React Architecture Radoslav Stankov 15/09/2020
2. !
3. Radoslav Stankov @rstankov blog.rstankov.com
 twitter.com/rstankov
 github.com/rstankov
 speakerdeck.com/rstankov
6. Architecture
13. " Frontend Tech Stack
18. # Have good defaults $ Have good code organization % Make common operations easy & Isolate dependencies ' Extensibility and reusability
19. # Have good defaults $ Have good code organization % Make common operations easy & Isolate dependencies ' Extensibility and reusability
22. components/ graphql/ hooks/ layouts/ pages/ routes/ server/ static/ styles/ types/ utils/ config.ts paths.ts
23. 2 1 3 Support Components Pages
24. Support Components Pages
25. 1) Support 2) Components 3) Pages
26. components/ graphql/ hooks/ layouts/ pages/ routes/ server/ static/ styles/ types/ utils/ config.ts paths.ts
27. 1 Support components/ graphql/ hooks/ layouts/ pages/ routes/ server/ static/ styles/ types/ utils/ config.ts paths.ts
28. 1 Support Components 2 components/ graphql/ hooks/ layouts/ pages/ routes/ server/ static/ styles/ types/ utils/ config.ts paths.ts
29. 1 Support Components Pages 2 3 components/ graphql/ hooks/ layouts/ pages/ routes/ server/ static/ styles/ types/ utils/ config.ts paths.ts
30. 1 Support
31. components/ graphql/ hooks/ layouts/ pages/ routes/ server/ static/ styles/ types/ utils/ config.ts paths.ts
32. components/ graphql/ hooks/ layouts/ pages/ routes/ server/ static/ styles/ types/ utils/ config.ts paths.ts
33. import getNextConfig from 'next/config'; const config = getNextConfig() as any; // ... other configuration export const environment = { isTest: config.publicRuntimeConfig.NODE_ENV === 'test', isProduction: config.publicRuntimeConfig.NODE_ENV === 'production', isBrowser: !!process.browser, }; config.ts
34. components/ graphql/ hooks/ layouts/ pages/ routes/ server/ static/ styles/ types/ utils/ config.ts paths.ts
35. apollo client:codegen \ --localSchemaFile="graphql/schema.json" \ --addTypename \ --tagName=gql \ --target=typescript \ --includes="{components,routes,utils,hooks,layouts}/**/*.{tsx,ts}" \ --outputFlat="graphql/types.ts"
37. components/Profile/Avatar/Fragment.ts import gql from 'graphql-tag'; export default gql` fragment ProfileAvatarFragment on Profile { id name kind imageUrl } `;
38. // ==================================================== // GraphQL fragment: ProfileAvatarFragment // ==================================================== export interface ProfileAvatarFragment { __typename: "Profile"; id: string; name: string; kind: string; imageUrl: string | null; } graphql/types.ts
39. import { ProfileAvatarFragment } from '~/graphql/types';
41. components/ graphql/ hooks/ layouts/ pages/ routes/ server/ static/ styles/ types/ utils/ config.ts paths.ts
43. useKey() useIsMounted() useTimeout()
 
 useHideOnTop()
44. useGraphQLFragment() useViewier() useIsLoggedIn()
45. useGraphQLFragment() useViewier() useIsLoggedIn()
46. components/ graphql/ hooks/ layouts/ pages/ routes/ server/ static/ styles/ types/ utils/ config.ts paths.ts
47. components/ graphql/ hooks/ layouts/ pages/ routes/ server/ static/ styles/ types/ utils/ config.ts paths.ts
48. components/ graphql/ hooks/ layouts/ pages/ routes/ server/ static/ styles/ types/ utils/ config.ts paths.ts
49. components/ graphql/ hooks/ layouts/ pages/ routes/ server/ static/ styles/ types/ utils/ config.ts paths.ts
51. import formatCount from './formatCount'; describe(formatCount.name, () => { it('does proper pluralization', () => { expect(formatCount(0, 'item')).toEqual('0 items'); expect(formatCount(1, 'item')).toEqual('1 item'); expect(formatCount(10, 'items')).toEqual('10 items'); }); it('formats 1000-9999 as Ks', () => { expect(formatCount(1000)).toEqual('1K'); expect(formatCount(1500)).toEqual('1.5K'); }); // .... }); utils/formatCount.test.ts
52. import { format } from 'date-fns'; export function formatDateTime(date: string) { return format(date, 'H:mm A · MMM D, YYYY'); } utils/date.ts
53. moment date.ts Component Page
54. date.ts Component Page date-fns
55. utils/ external/ Intercom/ OneSignal/ Segment/ Sentry/
56. components/ graphql/ hooks/ layouts/ pages/ routes/ server/ static/ styles/ types/ utils/ config.ts paths.ts
57. 2 Components
58. components/ graphql/ hooks/ layouts/ pages/ routes/ server/ static/ styles/ types/ utils/ config.ts paths.ts
61. ( Component as directory components/ Component/ SubComponent/ Fragment.graphql Mutation.graphql icon.svg index.js styles.css utils.js
63. import * as React from "react"; import Font from "components/Font"; <Font.Text>{text}</Font.Text>
64. import * as React from "react"; import styles from "./styles.css"; export function Text({ children }) { return ( <span className={styles.text}> {children} </span> ); } components/Font/index.tsx
65. CSS // style.css .text { font-size: 14px; } CSS // component.js
 import styles from './styles.css'; <span className={styles.text}> </span> CSS // style.css .text_3mRwv { font-size: 14px; } CSS // result.js <span class="text_3mRwv"> </span>

66. import * as React from "react"; import Font from "components/Font"; <Font.Text>text</Font.Text> // -> <span class="text">text</span>
67. import * as React from "react"; import Font from "components/Font"; <Font.Text>text</Font.Text> // -> <span class="text">text</span> <Font.Text component="p">text</Font.Text> // -> <p class="text">text</p>
68. import * as React from "react"; import Font from "components/Font"; <Font.Text>text</Font.Text> // -> <span class="text">text</span> <Font.Text component="p">text</Font.Text> // -> <p class="text">text</p> <Font.Text component={Link} to="/page">text</ Font.Text> // -> <a class="text" href="/page">text</a>
69. import * as React from "react"; import Font from "components/Font"; <Font.Text>text</Font.Text> // -> <span class="text">text</span> <Font.Text component="p">text</Font.Text> // -> <p class="text">text</p> <Font.Text component={Link} to="/page">text</ Font.Text> // -> <a class="text" href="/page">text</a> ( Pass custom component as prop
70. import * as React from "react"; import styles from "./styles.css"; export function Text({ component, children, ...props }) { Component = component || "span";
 return ( <Component className={styles.text} {...props}> {children} </Component> ); } ( Pass custom component as prop
71. import * as React from "react"; import styles from "./styles.css"; export function Text({ component, children, ...props }) { Component = component || "span";
 return ( <Component className={styles.text} {...props}> {children} </Component> ); } ) ( Pass custom component as prop
72. import * as React from "react"; import styles from "./styles.css"; export function Text({ component, ...props }) { Component = component || "span"; return <Component className={styles.text} {...props} />; } * ( Pass custom component as prop
73. import * as React from "react"; import Font from "components/Font"; <Font.Text>text</Font.Text> // -> <span class="text">Text</span>
74. import * as React from "react"; import Font from "components/Font"; import styles from "./styles.css"; <Font.Text className={styles.custom}>text</Font.Text> // -> <span class="text custom">text</span>
75. import * as React from "react"; import Font from "components/Font"; import styles from "./styles.css"; <Font.Text className={styles.custom}>text</Font.Text> // -> <span class="text custom">text</span> ( Pass extra class name
76. import * as React from "react"; import styles from "./styles.css"; import classNames from "classnames"; export function Text({ component, className, ...props }) { Component = component || "span";
 return <Component className={className(styles.text, className) } ( Pass extra class name
77. yarn install "classnames"
80. <Form.Mutation mutation={MUTATION} onSubmit={onComplete}> <Form.Field name="title" /> <Form.Field name="email" control="email" /> <Form.Field name="tagline" control="textarea" /> <Form.Field name="category" control="select" options={CATEGORIES} /> <Form.Field name="photos" control={PhotosInput} />
 <Form.Field name="topics" control={TopicsInput} /> <Form.Submit /> </Form.Mutation>
81. Input
82. Input Loading
83. Input Loading Success
84. Input Loading Success Errors
85. Submit Server Success Errors
86. remoteCall Server { result: 'ok' } { errors: {…} }
87. remoteCall Server { result: 'ok' } { 
 errors: { field1: 'error1',
 field2: 'error2'
 }
 }
88. { 
 errors: { field1: 'error1',
 field2: 'error2'
 }
 }
89. { 
 errors: { field1: 'error1',
 field2: 'error2'
 }
 }
90. mutation UserSettingsUpdate($input: UserSettingsUpdateInp response: userSettingsUpdate(input: $input) { node { id ...MySettingsPageViewer } errors { field message } } }
91. mutation UserSettingsUpdate($input: UserSettingsUpdateInp response: userSettingsUpdate(input: $input) { node { id ...MySettingsPageViewer } errors { field message } } }
92. <Form.Mutation mutation={MUTATION} onSubmit={onComplete}> <Form.Field name="title" /> <Form.Field name="email" control="email" /> <Form.Field name="tagline" control="textarea" /> <Form.Field name="category" control="select" options={CATEGORIES} /> <Form.Field name="photos" control={PhotosInput} />
 <Form.Field name="topics" control={TopicsInput} /> <Form.Submit /> </Form.Mutation>
94. import { TopicSearch_Topic as ITopic } from '~/graphql/types'; import ItemList from './ItemList' import QUERY from './Query'; import SearchResultItem from './SearchResultItem' import { IFormArrayFields } from '~/components/Form/types'; import { useLoadTopicsIds } from './utils'; interface IProps { fields: IFormArrayFields<string>; } export default function TopicsInput({ fields }: IProps) { const addTopic = (topic: ITopic) => { fields.value.includes(topic.id) && fields.push(topic.id); } const removeTopic = (topic: ITopic) => { fields.remove(fields.value.indexOf(topic.id)); } const topics = useLoadTopicsIds(fields);
95. import { TopicSearch_Topic as ITopic } from '~/graphql/types'; import ItemList from './ItemList' import QUERY from './Query'; import SearchResultItem from './SearchResultItem' import { IFormArrayFields } from '~/components/Form/types'; import { useLoadTopicsIds } from './utils'; interface IProps { fields: IFormArrayFields<string>; } export default function TopicsInput({ fields }: IProps) { const addTopic = (topic: ITopic) => { fields.value.includes(topic.id) && fields.push(topic.id); } const removeTopic = (topic: ITopic) => { fields.remove(fields.value.indexOf(topic.id)); } const topics = useLoadTopicsIds(fields);
96. import { TopicSearch_Topic as ITopic } from '~/graphql/types'; import ItemList from './ItemList' import QUERY from './Query'; import SearchResultItem from './SearchResultItem' import { IFormArrayFields } from '~/components/Form/types'; import { useLoadTopicsIds } from './utils'; interface IProps { fields: IFormArrayFields<string>; } export default function TopicsInput({ fields }: IProps) { const addTopic = (topic: ITopic) => { fields.value.includes(topic.id) && fields.push(topic.id); } const removeTopic = (topic: ITopic) => { fields.remove(fields.value.indexOf(topic.id)); } const topics = useLoadTopicsIds(fields);
97. import { TopicSearch_Topic as ITopic } from '~/graphql/types'; import ItemList from './ItemList' import QUERY from './Query'; import SearchResultItem from './SearchResultItem' import { IFormArrayFields } from '~/components/Form/types'; import { useLoadTopicsIds } from './utils'; interface IProps { fields: IFormArrayFields<string>; } export default function TopicsInput({ fields }: IProps) { const addTopic = (topic: ITopic) => { fields.value.includes(topic.id) && fields.push(topic.id); } const removeTopic = (topic: ITopic) => { fields.remove(fields.value.indexOf(topic.id)); } const topics = useLoadTopicsIds(fields);
98. import { TopicSearch_Topic as ITopic } from '~/graphql/types'; import ItemList from './ItemList' import QUERY from './Query'; import SearchResultItem from './SearchResultItem' import { IFormArrayFields } from '~/components/Form/types'; import { useLoadTopicsIds } from './utils'; interface IProps { fields: IFormArrayFields<string>; } export default function TopicsInput({ fields }: IProps) { const addTopic = (topic: ITopic) => { fields.value.includes(topic.id) && fields.push(topic.id); } const removeTopic = (topic: ITopic) => { fields.remove(fields.value.indexOf(topic.id)); } const topics = useLoadTopicsIds(fields);
99. import { TopicSearch_Topic as ITopic } from '~/graphql/types'; import ItemList from './ItemList' import QUERY from './Query'; import SearchResultItem from './SearchResultItem' import { IFormArrayFields } from '~/components/Form/types'; import { useLoadTopicsIds } from './utils'; interface IProps { fields: IFormArrayFields<string>; } export default function TopicsInput({ fields }: IProps) { const addTopic = (topic: ITopic) => { fields.value.includes(topic.id) && fields.push(topic.id); } const removeTopic = (topic: ITopic) => { fields.remove(fields.value.indexOf(topic.id)); } const topics = useLoadTopicsIds(fields);
100. fields.value.includes(topic.id) && fields.push(topic.id); } const removeTopic = (topic: ITopic) => { fields.remove(fields.value.indexOf(topic.id)); } const topics = useLoadTopicsIds(fields); if (topics === null) { return null; } return ( <React.Fragment> <SearchInput itemsPath="topics" onSelect={addTopic} query={QUERY} renderItem={SearchResultItem} /> <ItemList topics={topics} removeTopic={removeTopic} /> </React.Fragment> ); }
101. fields.value.includes(topic.id) && fields.push(topic.id); } const removeTopic = (topic: ITopic) => { fields.remove(fields.value.indexOf(topic.id)); } const topics = useLoadTopicsIds(fields); if (topics === null) { return null; } return ( <React.Fragment> <SearchInput itemsPath="topics" onSelect={addTopic} query={QUERY} renderItem={SearchResultItem} /> <ItemList topics={topics} removeTopic={removeTopic} /> </React.Fragment> ); }
102. const removeTopic = (topic: ITopic) => { fields.remove(fields.value.indexOf(topic.id)); } const topics = useLoadTopicsIds(fields); if (topics === null) { return null; } return ( <React.Fragment> <SearchInput itemsPath="topics" onSelect={addTopic} query={QUERY} renderItem={SearchResultItem} /> <ItemList topics={topics} removeTopic={removeTopic} /> </React.Fragment> ); } ProductsInput.isArray = true;
103. const removeTopic = (topic: ITopic) => { fields.remove(fields.value.indexOf(topic.id)); } const topics = useLoadTopicsIds(fields); if (topics === null) { return null; } return ( <React.Fragment> <SearchInput itemsPath="topics" onSelect={addTopic} query={QUERY} renderItem={SearchResultItem} /> <ItemList topics={topics} removeTopic={removeTopic} /> </React.Fragment> ); } ProductsInput.isArray = true;
105. Which is the form library we are using?!
108. +
109. +
110. +
111. , unified styles - common interface . custom inputs / understand backend GraphQL 0 Form
113. <Button href={paths.profile(profile)} />
114. <Button href={paths.profile(profile)} /> <Button onClick={onClickReturnsPromise} loadingText="Waiting for promise to resolve" />
115. <Button href={paths.profile(profile)} /> <Button onClick={onClickReturnsPromise} loadingText="Waiting for promise to resolve" /> <Button confirm="Are you sure?" mutation={DELETE_MUTATION} input={{ id }} loadingText="Deleting..." onMutate={redirectSomeWhere} />
116. <Button href={paths.profile(profile)} /> <Button onClick={onClickReturnsPromise} loadingText="Waiting for promise to resolve" /> <Button confirm="Are you sure?" mutation={DELETE_MUTATION} input={{ id }} loadingText="Deleting..." onMutate={redirectSomeWhere} />
117. <Button.Bordered {...props} /> <Button.Solid {...props} /> <Button.White {...props} /> <Button.Text {...props} /> <Button.Icon {...props} />
118. Utility Styling Domain
121. LikeButton Button
122. Domain Component
123. AnswerCard Like Button
124. <AnswerCard>
 <Box> <Card thumbnail={<ProfileAvatar profile={answer.profile}} name={answer.profile.name} subtitle="recommendations for" /> <Font.Title>{answer.question.title}</Font.Title> <Flex.Grid> {answer.products.map((product) => ( <Card url={paths.profile.show(product)} thumbnail={<ProfileAvatar profile={product}} name={product.name} /> ))} </Flex> <LikeButton subject={answer} /> <DateFormat date={answer.createdAt} /> </Box> </AnswerCard> Domain Component
125. Domain Component <AnswerCard> <Box>
 <Card /> <Font.Title /> <Flex.Grid> <Card /> </Flex> <LikeButton /> <DateFormat />
 </Box> </AnswerCard>
126. Atomic Design
127. ...Kinda 1
128. 2 generic components . domain components
129. 3 Pages
130. components/ graphql/ hooks/ layouts/ pages/ routes/ server/ static/ styles/ types/ utils/ config.ts paths.ts
131. export default { root: () => '/', static: { about() => '/about', // ... } profiles: { people: () => '/people', show: ({ slug }: { slug: string }) => `/@${slug}`, // ... }, // ... }; path.ts
132. import paths from 'ph/paths'; 
 paths.root(); // => / paths.static.about(); // => /about/ paths.profiles.people(); // => /people paths.profiles.show(profile); // => /@rstankov
133. components/ graphql/ hooks/ layouts/ pages/ routes/ server/ static/ styles/ types/ utils/ config.ts paths.ts
137. <Layout> <Header profile={profile} /> <ContentWithMobileMenu> {children} </ContentWithMobileMenu> <Footer /> <CookiePolicyBanner /> </Layout> layouts/Main/index.tsx
139. <MainLayout> <ProfileHeader profile={profile} /> <div> <ProfileMenu /> {content} </div> </MainLayout> layouts/Main/index.tsx
140. components/ graphql/ hooks/ layouts/ pages/ routes/ server/ static/ styles/ types/ utils/ config.ts paths.ts
141. ) components/ graphql/ hooks/ layouts/ pages/ routes/ server/ static/ styles/ types/ utils/ config.ts paths.ts
143. pages/profiles/[slug]/index.ts
144. import page from '~/routes/profiles/show'; export default page; pages/profiles/[slug]/index.ts
145. import page from '~/routes/profiles/show'; export default page; pages/profiles/[slug]/index.ts 3
146. components/ graphql/ hooks/ layouts/ pages/ routes/ server/ static/ styles/ types/ utils/ config.ts paths.ts
147. Component as directory routing/ profiles/ show/ SubComponent1/ SubComponent2/ Query.graphql index.js styles.css utils.js
148. Loading State Page Life Cycle
149. Loading State Page Life Cycle
150. Loading State Error State Page Life Cycle
151. Loading State Not Found Error Server Error Authorization Error Authentication Error Error State Page Life Cycle
152. Loading State Not Found Error Server Error Authorization Error Authentication Error Error State Loaded State Page Life Cycle
153. Loading State Not Found Error Server Error Authorization Error Authentication Error SEO Error State Analytics Loaded State Page Life Cycle ???
154. Loading State Not Found Error Server Error Authorization Error Authentication Error SEO Error State Analytics Loaded State render Page Life Cycle ???
155. import createPage from '~/utils/createPage'; import ProfileLayout from '~/layouts/Profile'; import { ProfileShowPage } from '~/graphql/types'; import QUERY from './Query'; export default createPage<ProfileShowPage>({ query: QUERY, queryVariables: ({ slug }) => ({ slug }), requireLogin: true, requirePermissions: ({ profile }) => profile.canManage, requireFeature: 'feature_flag', tags: ({ profile }) => profile.seoTags, title: ({ profile }) => profile.name, component: ({ data: { profile } }) => ( <ProfileLayout profile={profile}>{...}</ProfileLayout> ), });
156. import createPage from '~/utils/createPage'; import ProfileLayout from '~/layouts/Profile'; import { ProfileShowPage } from '~/graphql/types'; import QUERY from './Query'; export default createPage<ProfileShowPage>({ query: QUERY, queryVariables: ({ slug }) => ({ slug }), requireLogin: true, requirePermissions: ({ profile }) => profile.canManage, requireFeature: 'feature_flag', tags: ({ profile }) => profile.seoTags, title: ({ profile }) => profile.name, component: ({ data: { profile } }) => ( <ProfileLayout profile={profile}>{...}</ProfileLayout> ), });
157. import createPage from '~/utils/createPage'; import ProfileLayout from '~/layouts/Profile'; import { ProfileShowPage } from '~/graphql/types'; import QUERY from './Query'; export default createPage<ProfileShowPage>({ query: QUERY, queryVariables: ({ slug }) => ({ slug }), requireLogin: true, requirePermissions: ({ profile }) => profile.canManage, requireFeature: 'feature_flag', tags: ({ profile }) => profile.seoTags, title: ({ profile }) => profile.name, component: ({ data: { profile } }) => ( <ProfileLayout profile={profile}>{...}</ProfileLayout> ), });
158. import createPage from '~/utils/createPage'; import ProfileLayout from '~/layouts/Profile'; import { ProfileShowPage } from '~/graphql/types'; import QUERY from './Query'; export default createPage<ProfileShowPage>({ query: QUERY, queryVariables: ({ slug }) => ({ slug }), requireLogin: true, requirePermissions: ({ profile }) => profile.canManage, requireFeature: 'feature_flag', tags: ({ profile }) => profile.seoTags, title: ({ profile }) => profile.name, component: ({ data: { profile } }) => ( <ProfileLayout profile={profile}>{...}</ProfileLayout> ), });
159. import createPage from '~/utils/createPage'; import ProfileLayout from '~/layouts/Profile'; import { ProfileShowPage } from '~/graphql/types'; import QUERY from './Query'; export default createPage<ProfileShowPage>({ query: QUERY, queryVariables: ({ slug }) => ({ slug }), requireLogin: true, requirePermissions: ({ profile }) => profile.canManage, requireFeature: 'feature_flag', tags: ({ profile }) => profile.seoTags, title: ({ profile }) => profile.name, component: ({ data: { profile } }) => ( <ProfileLayout profile={profile}>{...}</ProfileLayout> ), });
160. import createPage from '~/utils/createPage'; import ProfileLayout from '~/layouts/Profile'; import { ProfileShowPage } from '~/graphql/types'; import QUERY from './Query'; export default createPage<ProfileShowPage>({ query: QUERY, queryVariables: ({ slug }) => ({ slug }), requireLogin: true, requirePermissions: ({ profile }) => profile.canManage, requireFeature: 'feature_flag', tags: ({ profile }) => profile.seoTags, title: ({ profile }) => profile.name, component: ({ data: { profile } }) => ( <ProfileLayout profile={profile}>{...}</ProfileLayout> ), });
162. http://graphql.org/
164. ViewerFragme ProfileLayoutHeaderFragment ProfileLayout MenuFragme nt ProfileShowPage
165. ViewerFragme ProfileLayout MenuFragme nt FollowButto Avatar Fragment ProTips Fragment Stack Fragment
166. ViewerFragme ProfileLayout MenuFragme nt FollowButto Avatar Fragment Avata r Card LikeButton
167. Query Fragm Fragm Fragm Fragm Fragm Fragm
168. import gql from 'graphql-tag'; import AnswerCardWithQuestionFragment from '~/components/Answer/Card/FragmentWithQue import DoYouUseFragment from './DoYouUse/Fragment'; import HeadTagsFragment from '~/utils/createPage/HeadTagsFragment'; import ProfileAvatarLinkFragment from '~/components/Profile/AvatarLink/Fragment'; import ProfileLayoutFragment from '~/layouts/Profile/Fragment'; import ProfilePeopleSectionFragment from '~/components/Profile/PeopleSection/Fragmen import RecommendedProductsFragment from './RecommendedProducts/Fragment'; import StackItemProfileFragment from '~/components/Stack/Item/Fragment'; import TipCardFragment from '~/components/Tip/Card/Fragment'; export default gql` query ProfilesShowPage($slug: String!) { profile(slug: $slug) { id answersCount canManage likedAnswersCount questionsCount tipsCount whitelisted using(first: 8) { edges { node { id note
169. import StackItemProfileFragment from '~/components/Stack/Item/Fragment'; import TipCardFragment from '~/components/Tip/Card/Fragment'; export default gql` query ProfilesShowPage($slug: String!) { profile(slug: $slug) { id answersCount canManage likedAnswersCount questionsCount tipsCount whitelisted using(first: 8) { edges { node { id note profileTo { id name ...ProfileAvatarLinkFragment ...StackItemProfileFragment } } } } answers(first: 3) {
170. } } tips(first: 1) { edges { node { id ...TipCardFragment } } } peopleWithSimilarInterests(limit: 4) { edges { node { id ...ProfilePeopleSectionFragment } } } ...HeadTagsFragment ...ProfileLayoutFragment ...ProfilesShowDoYouUseFragment ...ProfilesShowDoYouUseFragment } } ${AnswerCardWithQuestionFragment} ${DoYouUseFragment} ${HeadTagsFragment} ${ProfileAvatarLinkFragment}
172. Recap
173. . GraphQL # Components 4 isolating dependancies ' directory as folder / domain components , Pages - paths helper & layouts % createPage 5 Recap
176. Thanks 6