refactor: Move plan queries to graphql files (#696)

* move plan queries to graphql files * updated graphql types
manifoldco · Nov 4, 2019 · ec3841d · ec3841d · vercel · Nov 4, 2019
1 parent af6b39e
commit ec3841d
Show file tree

Hide file tree

Showing 6 changed files with 297 additions and 55 deletions.
diff --git a/src/components/manifold-plan-selector/manifold-plan-selector.tsx b/src/components/manifold-plan-selector/manifold-plan-selector.tsx
@@ -1,47 +1,13 @@
 import { h, Component, Element, State, Prop, Watch } from '@stencil/core';
-import { gql } from '@manifoldco/gql-zero';
 
 import connection from '../../state/connection';
 import logger from '../../utils/logger';
 import loadMark from '../../utils/loadMark';
 import { GraphqlFetch } from '../../utils/graphqlFetch';
-import planData from '../../data/plan-details-query';
 import { Product, Resource, PlanEdge } from '../../types/graphql';
 
-const plansQuery = gql`
-  query PLAN_LIST($productLabel: String!) {
-    product(label: $productLabel) {
-      id
-      displayName
-      label
-      logoUrl
-      plans(first: 25, orderBy: { field: COST, direction: ASC }) {
-        edges {
-          node {
-            ${planData}
-          }
-        }
-      }
-    }
-  }
-`;
-
-const resourceQuery = gql`
-  query RESOURCE_PRODUCT($resourceLabel: String!) {
-    resource(label: $resourceLabel) {
-      region {
-        id
-        displayName
-      }
-      plan {
-        id
-        product {
-          label
-        }
-      }
-    }
-  }
-`;
+import plansQuery from './plan-list.graphql';
+import resourceQuery from './resource.graphql';
 
 @Component({ tag: 'manifold-plan-selector' })
 export class ManifoldPlanSelector {

diff --git a/src/components/manifold-plan-selector/plan-list.graphql b/src/components/manifold-plan-selector/plan-list.graphql
@@ -0,0 +1,81 @@
+fragment plan on Plan {
+  id
+  displayName
+  label
+  free
+  cost
+  fixedFeatures(first: 25) {
+    edges {
+      node {
+        displayName
+        displayValue
+        label
+      }
+    }
+  }
+  meteredFeatures(first: 25) {
+    edges {
+      node {
+        label
+        displayName
+        numericDetails {
+          unit
+          costTiers {
+            limit
+            cost
+          }
+        }
+      }
+    }
+  }
+  configurableFeatures(first: 25) {
+    edges {
+      node {
+        label
+        displayName
+        type
+        options {
+          displayName
+          displayValue
+          label
+        }
+        numericDetails {
+          increment
+          min
+          max
+          unit
+          costTiers {
+            limit
+            cost
+          }
+        }
+      }
+    }
+  }
+  regions(first: 25, orderBy: { field: DISPLAY_NAME, direction: ASC }) {
+    edges {
+      node {
+        id
+        displayName
+        platform
+        dataCenter
+      }
+    }
+  }
+}
+
+query PlanList($productLabel: String!) {
+  product(label: $productLabel) {
+    id
+    displayName
+    label
+    logoUrl
+    plans(first: 25, orderBy: { field: COST, direction: ASC }) {
+      edges {
+        node {
+          ...plan
+        }
+      }
+    }
+  }
+}
diff --git a/src/components/manifold-plan-selector/resource.graphql b/src/components/manifold-plan-selector/resource.graphql
@@ -0,0 +1,14 @@
+query Resource($resourceLabel: String!) {
+  resource(label: $resourceLabel) {
+    region {
+      id
+      displayName
+    }
+    plan {
+      id
+      product {
+        label
+      }
+    }
+  }
+}
diff --git a/src/components/manifold-plan/manifold-plan.tsx b/src/components/manifold-plan/manifold-plan.tsx
@@ -1,26 +1,12 @@
 import { h, Component, State, Prop, Element, Watch } from '@stencil/core';
-import { gql } from '@manifoldco/gql-zero';
 
 import connection from '../../state/connection';
 import { Plan } from '../../types/graphql';
 import { GraphqlFetch } from '../../utils/graphqlFetch';
 import logger from '../../utils/logger';
 import loadMark from '../../utils/loadMark';
-import planData from '../../data/plan-details-query';
 
-const planQuery = gql`
-  query PRODUCT_AND_PLAN($planId: ID!) {
-    plan(id: $planId) {
-      ${planData}
-      product {
-        id
-        displayName
-        label
-        logoUrl
-      }
-    }
-  }
-`;
+import planQuery from './plan.graphql';
 
 @Component({ tag: 'manifold-plan' })
 export class ManifoldPlan {

diff --git a/src/data/plan-details-query.ts → src/components/manifold-plan/plan.graphql b/src/data/plan-details-query.ts → src/components/manifold-plan/plan.graphql
@@ -1,6 +1,4 @@
-import { gql } from '@manifoldco/gql-zero';
-
-export default gql`
+fragment planDetails on Plan {
   id
   displayName
   label
@@ -64,4 +62,16 @@ export default gql`
       }
     }
   }
-`;
+}
+
+query Plan($planId: ID!) {
+  plan(id: $planId) {
+    ...planDetails
+    product {
+      id
+      displayName
+      label
+      logoUrl
+    }
+  }
+}
diff --git a/src/types/graphql.ts b/src/types/graphql.ts
@@ -1777,6 +1777,191 @@ export type ResourceNoCredentialsQuery = (
   )> }
 );
 
+export type PlanFragment = (
+  { __typename?: 'Plan' }
+  & Pick<Plan, 'id' | 'displayName' | 'label' | 'free' | 'cost'>
+  & { fixedFeatures: Maybe<(
+    { __typename?: 'PlanFixedFeatureConnection' }
+    & { edges: Array<(
+      { __typename?: 'PlanFixedFeatureEdge' }
+      & { node: (
+        { __typename?: 'PlanFixedFeature' }
+        & Pick<PlanFixedFeature, 'displayName' | 'displayValue' | 'label'>
+      ) }
+    )> }
+  )>, meteredFeatures: Maybe<(
+    { __typename?: 'PlanMeteredFeatureConnection' }
+    & { edges: Array<(
+      { __typename?: 'PlanMeteredFeatureEdge' }
+      & { node: (
+        { __typename?: 'PlanMeteredFeature' }
+        & Pick<PlanMeteredFeature, 'label' | 'displayName'>
+        & { numericDetails: (
+          { __typename?: 'PlanMeteredFeatureNumericDetails' }
+          & Pick<PlanMeteredFeatureNumericDetails, 'unit'>
+          & { costTiers: Maybe<Array<(
+            { __typename?: 'PlanFeatureCostTier' }
+            & Pick<PlanFeatureCostTier, 'limit' | 'cost'>
+          )>> }
+        ) }
+      ) }
+    )> }
+  )>, configurableFeatures: Maybe<(
+    { __typename?: 'PlanConfigurableFeatureConnection' }
+    & { edges: Array<(
+      { __typename?: 'PlanConfigurableFeatureEdge' }
+      & { node: (
+        { __typename?: 'PlanConfigurableFeature' }
+        & Pick<PlanConfigurableFeature, 'label' | 'displayName' | 'type'>
+        & { options: Maybe<Array<(
+          { __typename?: 'PlanFixedFeature' }
+          & Pick<PlanFixedFeature, 'displayName' | 'displayValue' | 'label'>
+        )>>, numericDetails: Maybe<(
+          { __typename?: 'PlanConfigurableFeatureNumericDetails' }
+          & Pick<PlanConfigurableFeatureNumericDetails, 'increment' | 'min' | 'max' | 'unit'>
+          & { costTiers: Maybe<Array<(
+            { __typename?: 'PlanFeatureCostTier' }
+            & Pick<PlanFeatureCostTier, 'limit' | 'cost'>
+          )>> }
+        )> }
+      ) }
+    )> }
+  )>, regions: Maybe<(
+    { __typename?: 'RegionConnection' }
+    & { edges: Array<(
+      { __typename?: 'RegionEdge' }
+      & { node: (
+        { __typename?: 'Region' }
+        & Pick<Region, 'id' | 'displayName' | 'platform' | 'dataCenter'>
+      ) }
+    )> }
+  )> }
+);
+
+export type PlanListQueryVariables = {
+  productLabel: Scalars['String']
+};
+
+
+export type PlanListQuery = (
+  { __typename?: 'Query' }
+  & { product: Maybe<(
+    { __typename?: 'Product' }
+    & Pick<Product, 'id' | 'displayName' | 'label' | 'logoUrl'>
+    & { plans: Maybe<(
+      { __typename?: 'PlanConnection' }
+      & { edges: Array<(
+        { __typename?: 'PlanEdge' }
+        & { node: (
+          { __typename?: 'Plan' }
+          & PlanFragment
+        ) }
+      )> }
+    )> }
+  )> }
+);
+
+export type ResourceQueryVariables = {
+  resourceLabel: Scalars['String']
+};
+
+
+export type ResourceQuery = (
+  { __typename?: 'Query' }
+  & { resource: Maybe<(
+    { __typename?: 'Resource' }
+    & { region: Maybe<(
+      { __typename?: 'Region' }
+      & Pick<Region, 'id' | 'displayName'>
+    )>, plan: Maybe<(
+      { __typename?: 'Plan' }
+      & Pick<Plan, 'id'>
+      & { product: Maybe<(
+        { __typename?: 'Product' }
+        & Pick<Product, 'label'>
+      )> }
+    )> }
+  )> }
+);
+
+export type PlanDetailsFragment = (
+  { __typename?: 'Plan' }
+  & Pick<Plan, 'id' | 'displayName' | 'label' | 'free' | 'cost'>
+  & { fixedFeatures: Maybe<(
+    { __typename?: 'PlanFixedFeatureConnection' }
+    & { edges: Array<(
+      { __typename?: 'PlanFixedFeatureEdge' }
+      & { node: (
+        { __typename?: 'PlanFixedFeature' }
+        & Pick<PlanFixedFeature, 'displayName' | 'displayValue' | 'label'>
+      ) }
+    )> }
+  )>, meteredFeatures: Maybe<(
+    { __typename?: 'PlanMeteredFeatureConnection' }
+    & { edges: Array<(
+      { __typename?: 'PlanMeteredFeatureEdge' }
+      & { node: (
+        { __typename?: 'PlanMeteredFeature' }
+        & Pick<PlanMeteredFeature, 'label' | 'displayName'>
+        & { numericDetails: (
+          { __typename?: 'PlanMeteredFeatureNumericDetails' }
+          & Pick<PlanMeteredFeatureNumericDetails, 'unit'>
+          & { costTiers: Maybe<Array<(
+            { __typename?: 'PlanFeatureCostTier' }
+            & Pick<PlanFeatureCostTier, 'limit' | 'cost'>
+          )>> }
+        ) }
+      ) }
+    )> }
+  )>, configurableFeatures: Maybe<(
+    { __typename?: 'PlanConfigurableFeatureConnection' }
+    & { edges: Array<(
+      { __typename?: 'PlanConfigurableFeatureEdge' }
+      & { node: (
+        { __typename?: 'PlanConfigurableFeature' }
+        & Pick<PlanConfigurableFeature, 'label' | 'displayName' | 'type'>
+        & { options: Maybe<Array<(
+          { __typename?: 'PlanFixedFeature' }
+          & Pick<PlanFixedFeature, 'displayName' | 'displayValue' | 'label'>
+        )>>, numericDetails: Maybe<(
+          { __typename?: 'PlanConfigurableFeatureNumericDetails' }
+          & Pick<PlanConfigurableFeatureNumericDetails, 'increment' | 'min' | 'max' | 'unit'>
+          & { costTiers: Maybe<Array<(
+            { __typename?: 'PlanFeatureCostTier' }
+            & Pick<PlanFeatureCostTier, 'limit' | 'cost'>
+          )>> }
+        )> }
+      ) }
+    )> }
+  )>, regions: Maybe<(
+    { __typename?: 'RegionConnection' }
+    & { edges: Array<(
+      { __typename?: 'RegionEdge' }
+      & { node: (
+        { __typename?: 'Region' }
+        & Pick<Region, 'id' | 'displayName' | 'platform' | 'dataCenter'>
+      ) }
+    )> }
+  )> }
+);
+
+export type PlanQueryVariables = {
+  planId: Scalars['ID']
+};
+
+
+export type PlanQuery = (
+  { __typename?: 'Query' }
+  & { plan: Maybe<(
+    { __typename?: 'Plan' }
+    & { product: Maybe<(
+      { __typename?: 'Product' }
+      & Pick<Product, 'id' | 'displayName' | 'label' | 'logoUrl'>
+    )> }
+    & PlanDetailsFragment
+  )> }
+);
+
 export type Resources_With_OwnerQueryVariables = {
   first: Scalars['Int'],
   after: Scalars['String'],