index.js

import React from "react"
import { Query, compose, graphql } from "react-apollo"
import gql from "graphql-tag"

/**
 * Config.
 */

const config = {
  menu: [
    "main",
    "footer",
    "user"
  ]
}

const variables = {
  path: "/group/1/content/44"
}

/**
 * GraphQL.
 */

const QUERY_GROUP_CONTENT = gql`
  query GroupContent ($path: String!) {
    route(path: $path) {
      ... on EntityCanonicalUrl {
        entity {
          ... on GroupContent {
            entityUrl {
              path
            }
            entityIdOfGroupContent {
              entity {
                entityId
                entityLabel 
              }
            }
          }
        }
      }
    }
  }
`

const QUERY_GROUP_CONTENT_META = gql`
  query GroupContentMeta ($path: String!) {
    route(path: $path) {
      ... on EntityCanonicalUrl {
        entity {
          ... on GroupContent {
            entityMetatags {
              key
              value
            }
          }
        }
      }
    }
  }
`

const QUERY_MENU = gql`
  query Menu ($name: String!) {
    menuByName(name: $name) {
      name
      links {
        label
        url {
          path
        }
      }
    }
  }
`

/**
 * Apollo.
 */

const getGroupOperations = () => {
  const operation = {
    options: {
      variables: {
        path: variables.path
      }
    }
  }

  return [
    graphql(QUERY_GROUP_CONTENT, operation),
    graphql(QUERY_GROUP_CONTENT_META, operation),
  ]
}

const getOperations = () => {
  const operations = []

  // Build menu operations.
  config.menu.map(menu => operations.push(
    graphql(QUERY_MENU, {
      options: {
        variables: {
          name: menu
        }
      }
    })
  ))

  return [ ...operations, ...getGroupOperations() ]
}

const operations = getOperations()
const GC = compose(...operations)(() => null)

/**
 * Component.
 */

const Index = () => (
  <>
    <GC />
    <Query query={ QUERY_GROUP_CONTENT } variables={ variables } fetchPolicy="cache-only">
      { ({ data }) => {
        if (!data || !data.route) return null
        const groupEntity = data.route.entity
        const nodeEntity = groupEntity.entityIdOfGroupContent.entity
        return (
          <ul>
            <li>Path: { groupEntity.entityUrl.path }</li>
            <li>Node ID: { nodeEntity.entityId }</li>
          </ul>
        )
      } }
    </Query>
    <Query query={ QUERY_GROUP_CONTENT_META } variables={ variables } fetchPolicy="cache-only">
      { ({ data }) => {
        if (!data || !data.route) return null
        const meta = data.route.entity.entityMetatags
        return (
          <ul>
            { meta.map(({ key, value }) =>
              <li key={ key }>{ key }: { value }</li>) }
          </ul>
        )
      } }
    </Query>
    <Query query={ QUERY_MENU } variables={ { name: config.menu[0] } } fetchPolicy="cache-only">
      { ({ data }) => {
        if (!data || !data.menuByName) return null
        const menu = data.menuByName.links
        return (
          <ul>
            { menu.map(({ label, url: { path } }) =>
              <li key={ label }>{ label }: { path }</li>) }
          </ul>
        )
      } }
    </Query>
    <Query query={ QUERY_MENU } variables={ { name: config.menu[1] } } fetchPolicy="cache-only">
      { ({ data }) => {
        if (!data || !data.menuByName) return null
        const menu = data.menuByName.links
        return (
          <ul>
            { menu.map(({ label, url: { path } }) =>
              <li key={ label }>{ label }: { path }</li>) }
          </ul>
        )
      } }
    </Query>
    <Query query={ QUERY_MENU } variables={ { name: config.menu[2] } } fetchPolicy="cache-only">
      { ({ data }) => {
        if (!data || !data.menuByName) return null
        const menu = data.menuByName.links
        return (
          <ul>
            { menu.map(({ label, url: { path } }) =>
              <li key={ label }>{ label }: { path }</li>) }
          </ul>
        )
      } }
    </Query>
  </>
)


/**
 * Export.
 */

export default Index