Geo Replicable Details - Hookup GraphQL API to UI

What / Why

We are working to create a view that allows users to "dig into" a single replicable item's details: &16249 (closed)

This change is focused on hooking up the GraphQL API to the newly created frontend view so that we can begin showing relevant information to the user about a particular replicable.

Acceptance criteria

1. The GraphQL API implemented as part of #513116 (closed) is hooked up correctly in the app.vue file and returns the Object of data containing everything about that replicable item.

Implementation details

1. Build a generic query builder similar to replicable_type_query_builder.js in the ee/app/assets/javascripts/geo_replicable_item/graphql/ directory

import { gql } from '@apollo/client/core';

// Query.geoNode to be renamed to Query.geoSite => https://gitlab.com/gitlab-org/gitlab/-/issues/396739
export default (graphQlFieldName) => {
  return gql`
    query($id: Int) {
      geoNode {
        ${graphQlFieldName}(id: $id) {
          id
          state
          retryCount
          lastSyncFailure
          retryAt
          lastSyncedAt
          verifiedAt
          verificationRetryAt
          verificationState
          verificationStartedAt
          verificationRetryCount
          verificationChecksum
          verificationFailure
          createdAt
        }
      }
    }
  `;
};

2. Add apollo to ee/app/assets/javascripts/geo_replicable_item/components/app.vue and execute the query to fetch the replicable data

apollo: {
  replicableItem() {
    return {
      query: buildReplicableItemQuery(this.graphqlFieldName),
      variables() {
        return { id: this.replicableItemId }
      },
      error(error) {
        createAlert({ message: this.$options.i18n.errorMessage, error, captureError: true });
      },
    };
  },
},

3. Add loading state in ee/app/assets/javascripts/geo_replicable_item/components/app.vue

computed: {
  isLoading() {
    return this.$apollo.queries.replicableItem.loading;
  }
}

4. Render data to the view in ee/app/assets/javascripts/geo_replicable_item/components/app.vue

<template>
  <div>
    <gl-loading-icon v-if="isLoading" />
    <div v-else>{{ replicableItem }}</div>
  </div>
</template>