feat: Scaffold apollo-client integration, add nft mutation

client/package.json

@@ -4,6 +4,8 @@
   "private": true,
   "dependencies": {
     "@ant-design/icons": "^4.2.2",
+    "@apollo/link-ws": "^2.0.0-beta.3",
+    "@apollo/react-hooks": "^4.0.0",
     "@emotion/core": "^10.0.28",
     "@emotion/styled": "^10.0.27",
     "@testing-library/jest-dom": "^4.2.4",
@@ -14,12 +16,15 @@
     "@types/react": "^16.9.0",
     "@types/react-dom": "^16.9.0",
     "antd": "^4.5.2",
+    "apollo-client": "^2.6.10",
+    "graphql": "^15.3.0",
     "graphql-tag": "^2.11.0",
     "ipfs-http-client": "^46.0.1",
     "prettier": "^2.1.1",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
     "react-scripts": "3.4.1",
+    "subscriptions-transport-ws": "^0.9.18",
     "typescript": "~3.7.2",
     "wouter": "^2.5.1"
   },

client/src/components/CreateNonFungiblePage/Form.tsx

@@ -4,63 +4,89 @@ import { jsx } from '@emotion/core';
 import { Form, Input, Button } from 'antd';
 import ImageIpfsUpload, { ImageIpfsUploadProps } from './ImageIpfsUpload';
 import { IpfsContent } from '../../api/ipfsUploader';
+import { gql, useMutation } from '@apollo/client';
 
 interface InputFormProps extends ImageIpfsUploadProps {
   ipfsContent?: IpfsContent;
 }
 
+const CREATE_NON_FUNGIBLE_TOKEN = gql`
+  mutation CreateNonFungibleToken(
+    $name: String!
+    $description: String!
+    $symbol: String!
+    $ipfs_cid: String!
+  ) {
+    createNonFungibleToken(
+      name: $name
+      description: $description
+      symbol: $symbol
+      ipfs_cid: $ipfs_cid
+    ) {
+      hash
+      initiator
+      method
+      params
+      status
+    }
+  }
+`;
+
 const InputForm: FC<InputFormProps> = ({ ipfsContent, onChange }) => {
+  const [createNonFungibleToken, { data }] = useMutation(
+    CREATE_NON_FUNGIBLE_TOKEN
+  );
   const [form] = Form.useForm();
-  form.setFieldsValue({ ipfsCid: ipfsContent?.cid})
+  form.setFieldsValue({ ipfsCid: ipfsContent?.cid });
+
+  // Testing the output - we'd likely want to use callbacks in the useMutation
+  // hook to show the user feedback after they submit the form
+  console.log(data);
 
   return (
-    <Form form={form} layout="vertical" css={{width: '30em'}}>
-      <Form.Item
-        label="Name"
-        name="name"
-      >
-        <Input placeholder="Tezos Logo Token"/>
+    <Form form={form} layout="vertical" css={{ width: '30em' }}>
+      <Form.Item label="Name" name="name">
+        <Input placeholder="Tezos Logo Token" />
       </Form.Item>
-      <Form.Item
-        label="Description"
-        name="description"
-      >
+      <Form.Item label="Description" name="description">
         <Input.TextArea
           placeholder="Lorem ipsum"
           autoSize={{ minRows: 3, maxRows: 6 }}
         />
       </Form.Item>
-      <Form.Item
-        label="Symbol"
-        name="symbol"
-      >
+      <Form.Item label="Symbol" name="symbol">
         <Input />
       </Form.Item>
-      <Form.Item
-        label="Image Upload"
-        name="image"
-      >
+      <Form.Item label="Image Upload" name="image">
         <ImageIpfsUpload onChange={onChange} />
       </Form.Item>
-      <Form.Item
-        label="IPFS Hash (CID)"
-        name="ipfsCid"
-      >
+      <Form.Item label="IPFS Hash (CID)" name="ipfsCid">
         <Input readOnly />
       </Form.Item>
       <Form.Item>
-        <Button 
-          type="primary" 
-          htmlType="submit" 
+        <Button
+          type="primary"
+          htmlType="submit"
           shape="round"
           size="large"
-          css={{width: '12em'}}
+          css={{ width: '12em' }}
+          onClick={e => {
+            e.preventDefault();
+            createNonFungibleToken({
+              variables: {
+                name: form.getFieldValue('name'),
+                description: form.getFieldValue('description'),
+                symbol: form.getFieldValue('symbol'),
+                ipfs_cid: form.getFieldValue('ipfsCid')
+              }
+            });
+          }}
         >
           Create
         </Button>
-      </Form.Item>    
+      </Form.Item>
     </Form>
   );
-}
+};
 
-export default InputForm;
+export default InputForm;

client/src/generated/fragmentTypes.json

@@ -1,5 +1,3 @@
 {
-  "__schema": {
-    "types": []
-  }
+  "possibleTypes": {}
 }

client/src/generated/graphql_schema.tsx

@@ -135,7 +135,7 @@ export type MutationCreateNonFungibleTokenArgs = {
   name: Scalars['String'];
   description: Scalars['String'];
   symbol: Scalars['String'];
-  ipfs_hash: Scalars['String'];
+  ipfs_cid: Scalars['String'];
 };
 
 export type NonFungibleToken = {

client/src/index.tsx

@@ -1,14 +1,55 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
+import {
+  ApolloClient,
+  InMemoryCache,
+  split,
+  createHttpLink
+} from '@apollo/client';
+import { WebSocketLink } from '@apollo/link-ws';
+import { getMainDefinition } from 'apollo-utilities';
+import introspectionResult from './generated/fragmentTypes.json';
+import { ApolloProvider } from '@apollo/react-hooks';
 
 import './index.css';
 import App from './components/App';
 import * as serviceWorker from './serviceWorker';
 
+const httpLink = createHttpLink({ uri: '/graphql' });
+
+const wsLink = new WebSocketLink({
+  uri: window.location.origin.replace(/^http(s?:\/\/.*)$/, 'ws$1/graphql'),
+  options: {
+    reconnect: true
+  }
+});
+
+const link = split(
+  ({ query }) => {
+    const definition = getMainDefinition(query);
+    return (
+      definition.kind === 'OperationDefinition' &&
+      definition.operation === 'subscription'
+    );
+  },
+  wsLink,
+  httpLink
+);
+
+const cache = new InMemoryCache({
+  possibleTypes: introspectionResult.possibleTypes
+});
+
+const client = new ApolloClient({
+  link,
+  cache,
+  resolvers: {}
+});
+
 ReactDOM.render(
-  <React.StrictMode>
+  <ApolloProvider client={client}>
     <App />
-  </React.StrictMode>,
+  </ApolloProvider>,
   document.getElementById('root')
 );