✨ Register: Show list of active products

🛠 Generate apollo client typescript helpers from graphql schema

frontend/.graphqlconfig

@@ -0,0 +1,12 @@
+{
+  "name": "bbs-schema",
+  "schemaPath": "schema.graphql",
+  "extensions": {
+    "endpoints": {
+      "default": {
+        "url": "http://localhost:8000/graphql/",
+        "introspect": false
+      }
+    }
+  }
+}

frontend/codegen.yml

@@ -0,0 +1,8 @@
+schema: http://localhost:8000/graphql/
+documents: ./src/**/*.graphql
+generates:
+  ./src/types.ts:
+    plugins:
+      - typescript
+      - typescript-operations
+      - typescript-react-apollo

frontend/package.json

@@ -1,23 +1,30 @@
 {
   "name": "bbs",
+  "version": "1.0.0",
   "private": true,
   "scripts": {
-    "start": "vite",
     "dev": "vite",
     "build": "tsc && vite build",
+    "generate": "graphql-codegen",
     "preview": "vite preview",
+    "start": "vite",
     "test": "jest"
   },
   "dependencies": {
+    "@apollo/client": "^3.4.16",
     "react": "^17.0.0",
-    "react-dom": "^17.0.0"
+    "react-dom": "^17.0.0",
+    "graphql": "^15.7.2"
   },
   "devDependencies": {
+    "@graphql-codegen/cli": "^2.2.2",
+    "@graphql-codegen/typescript-operations": "^2.2.0",
+    "@graphql-codegen/typescript-react-apollo": "^3.2.0",
     "@types/react": "^17.0.0",
     "@types/react-dom": "^17.0.0",
     "@vitejs/plugin-react": "^1.0.0",
-    "typescript": "^4.3.2",
     "jest": "^27.3.1",
+    "typescript": "^4.3.2",
     "vite": "^2.6.4"
   }
 }

frontend/src/App.tsx

@@ -1,14 +1,19 @@
+import {ApolloProvider} from "@apollo/client";
 import React from 'react'
 
 import logo from './assets/brick.svg';
-
 import styles from './App.module.css'
+import {Register} from "./features/Register";
+import client from "./client";
 
 function App() {
   return (
+      <ApolloProvider client={client}>
     <div className={styles.app}>
         <img src={logo} className={styles.logo} alt="logo" />
+        <Register />
     </div>
+      </ApolloProvider>
   )
 }
 

frontend/src/client.ts

@@ -0,0 +1,8 @@
+import {ApolloClient,InMemoryCache} from "@apollo/client";
+
+const client = new ApolloClient({
+  uri: 'http://localhost:8000/graphql/',  // FIXME: env
+  cache: new InMemoryCache()
+});
+
+export default client;

frontend/src/features/Register.tsx

@@ -0,0 +1,17 @@
+import React from "react";
+
+import {Product, useAllProductsQuery} from '../types';
+
+export const Register: React.FC = () => {
+  const { data, error, loading } = useAllProductsQuery({variables:{active: true}});
+  if(error) {
+    console.log('🔥', error)
+    return null;
+  }
+  if(loading) {
+    return <div>...</div>
+  }
+  return (<div>{data?.allProducts.map((product: Product) => {
+    return <div key={product.id}>{product.name}</div>
+  })} </div>)
+};

frontend/src/features/allProducts.graphql

@@ -0,0 +1,8 @@
+query allProducts($active: Boolean!) {
+  allProducts(filters: {active: $active}) {
+    id
+    name
+    salePriceExt
+    salePriceInt
+  }
+}

frontend/src/types.ts

@@ -0,0 +1,85 @@
+import { gql } from '@apollo/client';
+import * as Apollo from '@apollo/client';
+export type Maybe<T> = T | null;
+export type Exact<T extends { [key: string]: unknown }> = { [K in keyof T]: T[K] };
+export type MakeOptional<T, K extends keyof T> = Omit<T, K> & { [SubKey in K]?: Maybe<T[SubKey]> };
+export type MakeMaybe<T, K extends keyof T> = Omit<T, K> & { [SubKey in K]: Maybe<T[SubKey]> };
+const defaultOptions =  {}
+/** All built-in and custom scalars, mapped to their actual values */
+export type Scalars = {
+  ID: string;
+  String: string;
+  Boolean: boolean;
+  Int: number;
+  Float: number;
+};
+
+export type Product = {
+  __typename?: 'Product';
+  id: Scalars['ID'];
+  name: Scalars['String'];
+  salePriceExt: Scalars['Float'];
+  salePriceInt: Scalars['Float'];
+};
+
+export type ProductFilter = {
+  active?: Maybe<Scalars['Boolean']>;
+  id?: Maybe<Scalars['ID']>;
+};
+
+export type Query = {
+  __typename?: 'Query';
+  allProducts: Array<Product>;
+};
+
+
+export type QueryAllProductsArgs = {
+  filters?: Maybe<ProductFilter>;
+};
+
+export type AllProductsQueryVariables = Exact<{
+  active: Scalars['Boolean'];
+}>;
+
+
+export type AllProductsQuery = { __typename?: 'Query', allProducts: Array<{ __typename?: 'Product', id: string, name: string, salePriceExt: number, salePriceInt: number }> };
+
+
+export const AllProductsDocument = gql`
+    query allProducts($active: Boolean!) {
+  allProducts(filters: {active: $active}) {
+    id
+    name
+    salePriceExt
+    salePriceInt
+  }
+}
+    `;
+
+/**
+ * __useAllProductsQuery__
+ *
+ * To run a query within a React component, call `useAllProductsQuery` and pass it any options that fit your needs.
+ * When your component renders, `useAllProductsQuery` returns an object from Apollo Client that contains loading, error, and data properties
+ * you can use to render your UI.
+ *
+ * @param baseOptions options that will be passed into the query, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options;
+ *
+ * @example
+ * const { data, loading, error } = useAllProductsQuery({
+ *   variables: {
+ *      active: // value for 'active'
+ *   },
+ * });
+ */
+export function useAllProductsQuery(baseOptions: Apollo.QueryHookOptions<AllProductsQuery, AllProductsQueryVariables>) {
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useQuery<AllProductsQuery, AllProductsQueryVariables>(AllProductsDocument, options);
+      }
+export function useAllProductsLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<AllProductsQuery, AllProductsQueryVariables>) {
+          const options = {...defaultOptions, ...baseOptions}
+          return Apollo.useLazyQuery<AllProductsQuery, AllProductsQueryVariables>(AllProductsDocument, options);
+        }
+export type AllProductsQueryHookResult = ReturnType<typeof useAllProductsQuery>;
+export type AllProductsLazyQueryHookResult = ReturnType<typeof useAllProductsLazyQuery>;
+export type AllProductsQueryResult = Apollo.QueryResult<AllProductsQuery, AllProductsQueryVariables>;