feat: send a lot less data

next.config.js

@@ -9,4 +9,5 @@ module.exports = {
   experimental: {
     nftTracing: true,
   },
+  // swcMinify: true, .. emotion transform is not working with swc yet
 };

src/api-client/graphql.tsx

@@ -380,6 +380,13 @@ export type FindLoosNearbyQuery = { __typename?: 'Query', loosByProximity: Array
 
 export type LooFragmentFragment = { __typename?: 'Loo', id?: string | null | undefined, createdAt?: any | null | undefined, updatedAt?: any | null | undefined, verifiedAt?: any | null | undefined, active?: boolean | null | undefined, name?: string | null | undefined, openingTimes?: any | null | undefined, accessible?: boolean | null | undefined, men?: boolean | null | undefined, women?: boolean | null | undefined, allGender?: boolean | null | undefined, babyChange?: boolean | null | undefined, children?: boolean | null | undefined, urinalOnly?: boolean | null | undefined, radar?: boolean | null | undefined, automatic?: boolean | null | undefined, noPayment?: boolean | null | undefined, paymentDetails?: string | null | undefined, notes?: string | null | undefined, removalReason?: string | null | undefined, attended?: boolean | null | undefined, campaignUOL?: boolean | null | undefined, location?: { __typename?: 'Point', lat: number, lng: number } | null | undefined };
 
+export type MinimumViableLooResponseQueryVariables = Exact<{
+  limit: Scalars['Int'];
+}>;
+
+
+export type MinimumViableLooResponseQuery = { __typename?: 'Query', loos: { __typename?: 'LooSearchResponse', loos: Array<{ __typename?: 'Loo', id?: string | null | undefined, name?: string | null | undefined, location?: { __typename?: 'Point', lat: number, lng: number } | null | undefined }> } };
+
 export type RemoveLooMutationVariables = Exact<{
   id: Scalars['ID'];
   reason: Scalars['String'];
@@ -534,6 +541,48 @@ export function useFindLoosNearbyLazyQuery(baseOptions?: Apollo.LazyQueryHookOpt
 export type FindLoosNearbyQueryHookResult = ReturnType<typeof useFindLoosNearbyQuery>;
 export type FindLoosNearbyLazyQueryHookResult = ReturnType<typeof useFindLoosNearbyLazyQuery>;
 export type FindLoosNearbyQueryResult = Apollo.QueryResult<FindLoosNearbyQuery, FindLoosNearbyQueryVariables>;
+export const MinimumViableLooResponseDocument = gql`
+    query minimumViableLooResponse($limit: Int!) {
+  loos(filters: {}, pagination: {limit: $limit}) {
+    loos {
+      id
+      name
+      location {
+        lat
+        lng
+      }
+    }
+  }
+}
+    `;
+
+/**
+ * __useMinimumViableLooResponseQuery__
+ *
+ * To run a query within a React component, call `useMinimumViableLooResponseQuery` and pass it any options that fit your needs.
+ * When your component renders, `useMinimumViableLooResponseQuery` 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 } = useMinimumViableLooResponseQuery({
+ *   variables: {
+ *      limit: // value for 'limit'
+ *   },
+ * });
+ */
+export function useMinimumViableLooResponseQuery(baseOptions: Apollo.QueryHookOptions<MinimumViableLooResponseQuery, MinimumViableLooResponseQueryVariables>) {
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useQuery<MinimumViableLooResponseQuery, MinimumViableLooResponseQueryVariables>(MinimumViableLooResponseDocument, options);
+      }
+export function useMinimumViableLooResponseLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<MinimumViableLooResponseQuery, MinimumViableLooResponseQueryVariables>) {
+          const options = {...defaultOptions, ...baseOptions}
+          return Apollo.useLazyQuery<MinimumViableLooResponseQuery, MinimumViableLooResponseQueryVariables>(MinimumViableLooResponseDocument, options);
+        }
+export type MinimumViableLooResponseQueryHookResult = ReturnType<typeof useMinimumViableLooResponseQuery>;
+export type MinimumViableLooResponseLazyQueryHookResult = ReturnType<typeof useMinimumViableLooResponseLazyQuery>;
+export type MinimumViableLooResponseQueryResult = Apollo.QueryResult<MinimumViableLooResponseQuery, MinimumViableLooResponseQueryVariables>;
 export const RemoveLooDocument = gql`
     mutation removeLoo($id: ID!, $reason: String!) {
   submitRemovalReport(report: {edit: $id, reason: $reason}) {
@@ -667,4 +716,4 @@ export function useUpdateLooMutation(baseOptions?: Apollo.MutationHookOptions<Up
       }
 export type UpdateLooMutationHookResult = ReturnType<typeof useUpdateLooMutation>;
 export type UpdateLooMutationResult = Apollo.MutationResult<UpdateLooMutation>;
-export type UpdateLooMutationOptions = Apollo.BaseMutationOptions<UpdateLooMutation, UpdateLooMutationVariables>;
+export type UpdateLooMutationOptions = Apollo.BaseMutationOptions<UpdateLooMutation, UpdateLooMutationVariables>;

src/api-client/operations/minimumViableLooResponse.graphql

@@ -0,0 +1,19 @@
+query minimumViableLooResponse($limit: Int!) {
+  loos(filters: {}, pagination: { limit: $limit }) {
+    loos {
+      id
+      name
+      location {
+        lat
+        lng
+      }
+      noPayment
+      allGender
+      automatic
+      accessible
+      babyChange
+      radar
+      campaignUOL
+    }
+  }
+}

src/api-client/page.tsx

@@ -77,5 +77,40 @@ export const ssrFindLoosNearby = {
       withPage: withPageFindLoosNearby,
       usePage: useFindLoosNearby,
     }
+export async function getServerPageMinimumViableLooResponse
+    (options: Omit<Apollo.QueryOptions<Types.MinimumViableLooResponseQueryVariables>, 'query'>, ctx?: any ){
+        const apolloClient = getApolloClient(ctx);
+
+        const data = await apolloClient.query<Types.MinimumViableLooResponseQuery>({ ...options, query: Operations.MinimumViableLooResponseDocument });
+
+        const apolloState = apolloClient.cache.extract();
+
+        return {
+            props: {
+                apolloState: apolloState,
+                data: data?.data,
+                error: data?.error ?? data?.errors ?? null,
+            },
+        };
+      }
+export const useMinimumViableLooResponse = (
+  optionsFunc?: (router: NextRouter)=> QueryHookOptions<Types.MinimumViableLooResponseQuery, Types.MinimumViableLooResponseQueryVariables>) => {
+  const router = useRouter();
+  const options = optionsFunc ? optionsFunc(router) : {};
+  return useQuery(Operations.MinimumViableLooResponseDocument, options);
+};
+export type PageMinimumViableLooResponseComp = React.FC<{data?: Types.MinimumViableLooResponseQuery, error?: Apollo.ApolloError}>;
+export const withPageMinimumViableLooResponse = (optionsFunc?: (router: NextRouter)=> QueryHookOptions<Types.MinimumViableLooResponseQuery, Types.MinimumViableLooResponseQueryVariables>) => (WrappedComponent:PageMinimumViableLooResponseComp) : NextPage  => (props) => {
+                const router = useRouter()
+                const options = optionsFunc ? optionsFunc(router) : {};
+                const {data, error } = useQuery(Operations.MinimumViableLooResponseDocument, options)    
+                return <WrappedComponent {...props} data={data} error={error} /> ;
+
+            }; 
+export const ssrMinimumViableLooResponse = {
+      getServerPage: getServerPageMinimumViableLooResponse,
+      withPage: withPageMinimumViableLooResponse,
+      usePage: useMinimumViableLooResponse,
+    }
 
 

src/api-client/staticPage.tsx

@@ -126,3 +126,67 @@ export const ssrFindLoosNearby = {
   withPage: withPageFindLoosNearby,
   usePage: useFindLoosNearby,
 };
+export async function getServerPageMinimumViableLooResponse(
+  options: Omit<
+    Apollo.QueryOptions<Types.MinimumViableLooResponseQueryVariables>,
+    'query'
+  >,
+  ctx?: any
+) {
+  const apolloClient = getApolloClient(ctx);
+
+  const data = await apolloClient.query<Types.MinimumViableLooResponseQuery>({
+    ...options,
+    query: Operations.MinimumViableLooResponseDocument,
+  });
+
+  const apolloState = apolloClient.cache.extract();
+
+  return {
+    props: {
+      apolloState: apolloState,
+      data: data?.data,
+      error: data?.error ?? data?.errors ?? null,
+    },
+  };
+}
+export const useMinimumViableLooResponse = (
+  optionsFunc?: (
+    router: NextRouter
+  ) => QueryHookOptions<
+    Types.MinimumViableLooResponseQuery,
+    Types.MinimumViableLooResponseQueryVariables
+  >
+) => {
+  const router = useRouter();
+  const options = optionsFunc ? optionsFunc(router) : {};
+  return useQuery(Operations.MinimumViableLooResponseDocument, options);
+};
+export type PageMinimumViableLooResponseComp = React.FC<{
+  data?: Types.MinimumViableLooResponseQuery;
+  error?: Apollo.ApolloError;
+}>;
+export const withPageMinimumViableLooResponse =
+  (
+    optionsFunc?: (
+      router: NextRouter
+    ) => QueryHookOptions<
+      Types.MinimumViableLooResponseQuery,
+      Types.MinimumViableLooResponseQueryVariables
+    >
+  ) =>
+  (WrappedComponent: PageMinimumViableLooResponseComp): NextPage =>
+  (props) => {
+    const router = useRouter();
+    const options = optionsFunc ? optionsFunc(router) : {};
+    const { data, error } = useQuery(
+      Operations.MinimumViableLooResponseDocument,
+      options
+    );
+    return <WrappedComponent {...props} data={data} error={error} />;
+  };
+export const ssrMinimumViableLooResponse = {
+  getServerPage: getServerPageMinimumViableLooResponse,
+  withPage: withPageMinimumViableLooResponse,
+  usePage: useMinimumViableLooResponse,
+};

src/components/LooMap/Markers.tsx

@@ -7,33 +7,26 @@ import React, {
   forwardRef,
 } from 'react';
 import { useRouter } from 'next/router';
-import { useFindLoosNearbyQuery } from '../../api-client/graphql';
+import { useMinimumViableLooResponseQuery } from '../../api-client/graphql';
 import { Marker, useMapEvents, useMap } from 'react-leaflet';
 import ToiletMarkerIcon from './ToiletMarkerIcon';
 import MarkerClusterGroup from 'react-leaflet-markercluster';
 const KEY_ENTER = 13;
 
 const Markers = ({ focus }) => {
   const router = useRouter();
-  const map = useMap();
 
-  const [mapFind, _] = useState({
-    lat: 54.093409,
-    lng: -2.89479,
-    radius: 1000000,
-  });
-
-  const { data } = useFindLoosNearbyQuery({
+  const { data } = useMinimumViableLooResponseQuery({
     fetchPolicy: 'cache-first',
     nextFetchPolicy: 'cache-only',
-    variables: mapFind,
+    variables: { limit: 1000000 },
   });
 
   const memoizedMarkers = useMemo(() => {
-    if (!data?.loosByProximity) {
+    if (!data?.loos.loos) {
       return null;
     }
-    return data.loosByProximity.map((toilet) => {
+    return data.loos.loos.map((toilet) => {
       return (
         <Marker
           key={toilet.id}

src/components/withApollo.tsx

@@ -10,7 +10,7 @@ import {
 export const withApollo = (Comp: NextPage) =>
   function WithApollo(props: any) {
     return (
-      <ApolloProvider client={getApolloClient(null, props.apolloState)}>
+      <ApolloProvider client={getApolloClient(null, props.data)}>
         <Comp />
       </ApolloProvider>
     );
@@ -28,7 +28,7 @@ export const getApolloClient = (
     uri: typeof window === 'undefined' ? url + '/api' : '/api',
     fetch,
   });
-  const cache = new InMemoryCache().restore(initialState || {});
+  const cache = new InMemoryCache().restore(initialState);
   return new ApolloClient({
     link: httpLink,
     cache,

src/pages/index.tsx

@@ -13,12 +13,7 @@ import { withApollo } from '../components/withApollo';
 import { GetServerSideProps, GetStaticPaths, NextPage } from 'next';
 import useFilters from '../hooks/useFilters';
 import { ssrFindLoosNearby } from '../api-client/page';
-import handler, { getStaticApolloClient, server as SS } from './api';
-import {
-  FindLoosNearbyDocument,
-  FindLoosNearbyQuery,
-} from '../api-client/graphql';
-import { getServerPageFindLoosNearby } from '../api-client/staticPage';
+import { getServerPageMinimumViableLooResponse } from '../api-client/staticPage';
 
 const SIDEBAR_BOTTOM_MARGIN = 32;
 const MapLoader = () => <p>Loading map...</p>;
@@ -28,8 +23,6 @@ const LooMap = dynamic(() => import('../components/LooMap'), {
 });
 
 const HomePage = () => {
-  const router = useRouter();
-  const { message } = router.query;
   const [mapState, setMapState] = useMapState();
 
   const { filters, filtered, setFilters } = useFilters([]);
@@ -80,19 +73,13 @@ const HomePage = () => {
   );
 };
 
-const staticQueryVars = {
-  lat: 54.093409,
-  lng: -2.89479,
-  radius: 1000000,
-};
-
 export const getStaticProps: GetServerSideProps = async ({ params, req }) => {
   const { dbConnect } = require('../api/db');
   await dbConnect();
 
-  const res = await getServerPageFindLoosNearby(
+  const res = await getServerPageMinimumViableLooResponse(
     {
-      variables: { ...staticQueryVars },
+      variables: { limit: 1000000 },
     },
     { req }
   );
@@ -103,12 +90,7 @@ export const getStaticProps: GetServerSideProps = async ({ params, req }) => {
     };
   }
 
-  return res;
+  return { props: { data: res.props.apolloState } };
 };
 
-export default withApollo(
-  ssrFindLoosNearby.withPage(() => ({
-    variables: staticQueryVars,
-    ssr: true,
-  }))(HomePage)
-);
+export default withApollo(HomePage);

tsconfig.json

@@ -13,7 +13,8 @@
     "resolveJsonModule": true,
     "isolatedModules": true,
     "jsx": "preserve",
-    "jsxImportSource": "@emotion/react"
+    "jsxImportSource": "@emotion/react",
+    "incremental": true
   },
   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
   "exclude": ["node_modules"]