Refactoring graphQL with fragments

client/src/Components/Event/Edit/index.js

@@ -1,5 +1,4 @@
 import React from 'react'
-import gql from 'graphql-tag'
 import { Query } from 'react-apollo'
 
 import Typography from '@material-ui/core/Typography'
@@ -7,22 +6,7 @@ import { withStyles } from '@material-ui/core/styles'
 
 import styles from './styles'
 
-const HOSTS_EVENT = gql`
-  query Hosts_Event($designator: ID!){
-    hosts_Event(designator: $designator) {
-      name
-      designator
-      startDatetime
-      finishDatetime
-      host {
-        alias
-        firstName
-        lastName
-      }
-      description
-    }
-  }
-`
+import { showEventCalls } from '../../GraphQL/Calls/index'
 
 class Edit extends React.Component {
   render () {
@@ -37,7 +21,7 @@ class Edit extends React.Component {
           Enroll in an competition {this.props.match.params.slug}
         </Typography>
         <Query
-          query={HOSTS_EVENT}
+          query={showEventCalls.HOSTS_EVENT}
           variables={{ designator: this.props.match.params.slug }}
         >
           {({ loading, error, data }) => {

client/src/Components/GraphQL/Calls/hostedEvents.js

@@ -1,29 +1,23 @@
 import gql from 'graphql-tag'
+import { eventMinimalInfo } from '../Fragments'
 
-const fragments = `
-  name
-  designator
-  startDatetime
-  finishDatetime
-  host {
-    alias
-    firstName
-    lastName
-  }
-  description
-`
-
-export const HOSTS_HOSTEVENT = gql`
+const HOSTS_HOSTEVENT = gql`
   mutation Hosts_HostEvent($name: String!, $description: String!, $startDatetime: Int!, $finishDatetime: Int!) {
     hosts_HostEvent(name: $name, description: $description, startDatetime: $startDatetime, finishDatetime: $finishDatetime) {
-      ${fragments}
+      ...EventMinimalInfo
     }
   }
+  ${eventMinimalInfo}
 `
-export const HOSTS_EVENTSBYHOST = gql`
+const HOSTS_EVENTSBYHOST = gql`
   query Hosts_EventsByHost{
     hosts_EventsByHost {
-      ${fragments}
+      ...EventMinimalInfo
     }
   }
+  ${eventMinimalInfo}
 `
+export default {
+  HOSTS_HOSTEVENT,
+  HOSTS_EVENTSBYHOST
+}

client/src/Components/GraphQL/Calls/index.js

@@ -0,0 +1,7 @@
+import hostedEventsCalls from './hostedEvents'
+import showEventCalls from './showEvent'
+
+export {
+  hostedEventsCalls,
+  showEventCalls
+}

client/src/Components/GraphQL/Calls/showEvent.js

@@ -0,0 +1,15 @@
+import gql from 'graphql-tag'
+import { eventFullInfo } from '../Fragments'
+
+const HOSTS_EVENT = gql`
+  query Hosts_Event($designator: ID!) {
+    hosts_Event(designator: $designator) {
+      ...EventFullInfo
+    }
+  }
+  ${eventFullInfo}
+`
+
+export default {
+  HOSTS_EVENT
+}

client/src/Components/GraphQL/Fragments/event.js

@@ -0,0 +1,61 @@
+import gql from 'graphql-tag'
+
+export const eventMinimalInfo = gql`
+  fragment EventMinimalInfo on hosts_Event {
+    name
+    designator
+    startDatetime
+    finishDatetime
+    host {
+      alias
+      firstName
+      lastName
+    }
+    description
+  }
+`
+
+export const eventFullInfo = gql`
+  fragment EventFullInfo on hosts_Event {
+    designator
+    name
+    host{
+      alias
+      firstName
+      lastName
+    }
+    description
+    startDatetime
+    finishDatetime
+    formula{
+      name
+    }
+    plotter{
+      name
+      host
+      repo
+      moduleName
+    }
+    rules{
+      position
+      title
+      description
+    }
+    participants{
+      team{
+        name
+      }
+      botId
+      releaseId
+    }
+    prizes{
+      rank
+      amount
+      additional{
+        condition
+        amount
+        asset
+      }
+    }
+  }
+`

client/src/Components/GraphQL/Fragments/index.js

@@ -0,0 +1,9 @@
+import {
+  eventMinimalInfo,
+  eventFullInfo
+} from './event'
+
+export {
+  eventMinimalInfo,
+  eventFullInfo
+}

client/src/Components/HostedEvents/New.js

@@ -1,6 +1,6 @@
 import React from 'react'
 import { Mutation } from 'react-apollo'
-import { HOSTS_HOSTEVENT, HOSTS_EVENTSBYHOST } from './graphql'
+import { hostedEventsCalls } from '../GraphQL/Calls/index'
 import { DateTime } from 'luxon'
 
 import {
@@ -24,11 +24,11 @@ class New extends React.Component {
   render () {
     const { name, description, startDatetime, finishDatetime } = this.state
     return (
-      <Mutation mutation={HOSTS_HOSTEVENT}
+      <Mutation mutation={hostedEventsCalls.HOSTS_HOSTEVENT}
         update={(store, { data }) => {
-          const { hosts_EventsByHost: hostedEvents } = store.readQuery({ query: HOSTS_EVENTSBYHOST })
+          const { hosts_EventsByHost: hostedEvents } = store.readQuery({ query: hostedEventsCalls.HOSTS_EVENTSBYHOST })
           store.writeQuery({
-            query: HOSTS_EVENTSBYHOST,
+            query: hostedEventsCalls.HOSTS_EVENTSBYHOST,
             data: { hosts_EventsByHost: hostedEvents.concat([data.hosts_HostEvent]) }
           })
           this.props.handleNewEvent(data.hosts_HostEvent)

client/src/Components/HostedEvents/index.js

@@ -1,6 +1,5 @@
 import React from 'react'
 import { Query } from 'react-apollo'
-import { HOSTS_EVENTSBYHOST } from './graphql'
 
 import {
   Button,
@@ -13,6 +12,8 @@ import {
 import { withStyles } from '@material-ui/core/styles'
 import styles from './styles'
 
+import { hostedEventsCalls } from '../GraphQL/Calls/index'
+
 import New from './New'
 import Event from './Event'
 
@@ -33,7 +34,7 @@ class HostedEvent extends React.Component {
     return (
       <React.Fragment>
         <Query
-          query={HOSTS_EVENTSBYHOST}
+          query={hostedEventsCalls.HOSTS_EVENTSBYHOST}
         >
           {({ loading, error, data }) => {
             if (loading) return 'Loading...'