AdminDashboardQuery.ts

import {
  GraphQLFieldConfig,
  GraphQLFloat,
  GraphQLNonNull,
  GraphQLObjectType,
  GraphQLString,
  GraphQLUnionType,
} from 'graphql';
import { globalIdField } from 'graphql-relay';
import * as AdminDashboardService from '../../services/AdminDashboardService';
import {
  BarChartContent,
  Chart,
  ChartContent,
  Context,
  PaginationInfo,
  XYChartData,
} from '../../types';
import unexpectedCase from '../../utils/unexpectedCase';
import GraphQLDate from '../types/GraphQLDate';
import nonNullList from '../types/nonNullList';
import { connectionArgs, connectionDefinitions } from './connection';

const XYChartDataType = new GraphQLObjectType<XYChartData, Context>({
  name: 'XYChartData',
  fields: () => ({
    x: { type: new GraphQLNonNull(GraphQLFloat) },
    y: { type: new GraphQLNonNull(GraphQLFloat) },
    label: { type: GraphQLString },
  }),
});

const BarChartContentType = new GraphQLObjectType<BarChartContent, Context>({
  name: 'BarChartContent',
  fields: {
    data: { type: nonNullList(XYChartDataType) },
  },
});

const ChartContentType = new GraphQLUnionType({
  name: 'ChartContent',
  types: [BarChartContentType],
  resolveType: (node: ChartContent) => {
    switch (node.type) {
      case 'BAR_CHART':
        return BarChartContentType;
      default:
        throw unexpectedCase(node.type);
    }
  },
});

export const ChartType = new GraphQLObjectType<Chart, Context>({
  name: 'Chart',
  fields: {
    id: globalIdField(),
    title: { type: GraphQLString },
    content: { type: new GraphQLNonNull(ChartContentType) },
  },
});

const {
  connectionType: ChartConnectionType,
  edgeType: ChartEdgeType,
} = connectionDefinitions({
  name: 'Chart',
  nodeType: ChartType,
});

export { ChartConnectionType, ChartEdgeType };

export const adminDashboardField: GraphQLFieldConfig<
  {},
  Context,
  PaginationInfo & { from: string; to?: string }
> = {
  type: new GraphQLNonNull(ChartConnectionType),
  args: {
    from: { type: new GraphQLNonNull(GraphQLDate) },
    to: { type: GraphQLDate },
    ...connectionArgs,
  },
  resolve: async (_node, { from, to, ...pagination }, ctx) => {
    return await AdminDashboardService.findConnection(
      ctx,
      { from, to },
      pagination,
    );
  },
};

BarChartContent.tsx

import { Text } from '@th3rdwave/ui';
import * as React from 'react';
import { createFragmentContainer, graphql } from 'react-relay';
import { BarChartContent_content } from './__generated__/BarChartContent_content.graphql';

type BarChartContentProps = {
  content: BarChartContent_content;
};

function BarChartContentInner({ content }: BarChartContentProps) {
  return <Text>{JSON.stringify(content.data)}</Text>;
}

export const BarChartContent = createFragmentContainer(
  React.memo(BarChartContentInner),
  {
    content: graphql`
      fragment BarChartContent_content on BarChartContent {
        data {
          x
          y
          label
        }
      }
    `,
  },
);

Chart.tsx

import { Card } from '@th3rdwave/ui';
import * as React from 'react';
import { createFragmentContainer, graphql } from 'react-relay';
import { Chart_chart } from './__generated__/Chart_chart.graphql';

const CHART_TYPES = {
  BarChartContent: require('./BarChartContent').BarChartContent,
};

type ChartProps = {
  chart: Chart_chart;
};

function ChartContent({ chart }: ChartProps) {
  const Component = CHART_TYPES[chart.content.__typename];
  if (Component == null) {
    return null;
  } else {
    return (
      <Card title={chart.title}>
        <Component content={chart.content} />
      </Card>
    );
  }
}

export const Chart = createFragmentContainer(ChartContent, {
  chart: graphql`
    fragment Chart_chart on Chart {
      id
      title
      content {
        __typename
        ...BarChartContent_content
      }
    }
  `,
});

HomeScreen.tsx

import {
  createFragmentContainer,
  createRenderer,
  graphql,
  connectionToArray,
} from '@th3rdwave/relay';
import { Button, Card, Title1, Box } from '@th3rdwave/ui';
import * as React from 'react';
import { HomeScreen_viewer } from './__generated__/HomeScreen_viewer.graphql';
import { Chart } from '../chart/Chart';

type Props = {
  viewer: HomeScreen_viewer;
};

function HomeScreen({ viewer }: Props) {
  return (
    <Box>
      {connectionToArray(viewer.adminDashboard).map(c => (
        <Chart chart={c} />
      ))}
    </Box>
  );
}

const FragmentContainer = createFragmentContainer(HomeScreen, {
  viewer: graphql`
    fragment HomeScreen_viewer on Viewer {
      adminDashboard(from: $from, first: 20) {
        edges {
          node {
            id
            ...Chart_chart
          }
        }
      }
    }
  `,
});

export default createRenderer(FragmentContainer, {
  query: graphql`
    query HomeScreenQuery($from: Date!) {
      viewer {
        ...HomeScreen_viewer
      }
    }
  `,
  queriesParams: () => ({
    from: new Date().toJSON(),
  }),
});