{{#if typescript}}
import * as React from 'react';
{{else}}
import React from 'react';
{{/if}}
import { gql, useQuery } from '@apollo/client';
import {{#if export }}{ {{ name }}Controller{{#if typescript}}, {{ name }}ControllerProps{{/if}} } {{~else~}} {{ name }}Controller{{#if typescript}}, { {{ name }}ControllerProps }{{/if}}{{/if}} from './{{ name }}.controller';
{{#if proptypes}}
import PropTypes from 'prop-types';
{{/if}}
{{#if typescript}}
import { Get{{ name }}, Get{{ name }}Variables } from '{{ pathToTypesDefinition }}';
/**
* NOTE: Make sure that in your schema.graphql file you have a defined query and a required type
* {{ lowercaseName }}(id: Int): {{ name }}
**/

export type {{ name }}ApolloProps = {{name}}ControllerProps & {
  //
  id: string;
}
{{/if}}

export const GET_{{ uppercaseName }}_QUERY = gql`
  query Get{{ name }}($id: ID!) {
    {{ lowercaseName }}(id: $id) {
      name
    }
  }
`;

{{#if export }}export {{/if}}const {{ name }}Apollo = (props{{#if typescript}}: {{ name }}ApolloProps{{/if}}){{#if typescript}}: JSX.Element{{~/if}} => {
  const { loading, error, data } = useQuery{{#if typescript}}<Get{{ name }}, Get{{ name }}Variables>{{/if}}(GET_{{ uppercaseName }}_QUERY, {
    variables: {
      id: props.id
    }
  });

  const args = data?.{{ lowercaseName }} || {}

  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error...</p>;

  return <{{ name }}Controller {...args} />;
};

{{#if proptypes~}}
{{ name }}Apollo.propTypes = {
//
};
{{#unless export}}

{{/unless}}
{{/if}}
{{#unless export }}
export default {{ name }}Apollo;
{{/unless}}