feat: add support of Mutation

Author: gregberge

packages/smooth/apollo.js

@@ -0,0 +1,8 @@
+import React from 'react'
+import { Mutation as ApolloMutation } from 'react-apollo'
+import { useOperationProps } from './utils'
+
+export function Mutation(props) {
+  const operationProps = useOperationProps(props)
+  return <ApolloMutation {...operationProps} />
+}

packages/smooth/src/query/Mutation.js

@@ -1,56 +1,8 @@
-import React, { useEffect } from 'react'
-import qs from 'query-string'
+import React from 'react'
 import { Query as ApolloQuery } from 'react-apollo'
-import { usePageContext } from '../page/PageContext'
-import { usePause } from '../router/HiddenRouter'
+import { useOperationProps } from './utils'
 
-function getQueryContext({ location, lang, pageContent }) {
-  const { id, preview } = qs.parse(location.search)
-  const headers = {}
-
-  if (lang) {
-    headers['x-smooth-lang'] = lang
-  }
-
-  if (preview && pageContent) {
-    headers['x-smooth-preview-id'] = id
-    headers['x-smooth-preview'] = 1
-  }
-
-  return { headers }
-}
-
-function PrefetchHandler({ children, ...props }) {
-  const unpause = usePause()
-  useEffect(() => {
-    if (!props.loading) {
-      unpause()
-    }
-  }, [props.loading, unpause])
-  return children(props)
-}
-
-export function Query({
-  children,
-  prefetch = true,
-  pageContent = false,
-  context,
-  ...props
-}) {
-  const { lang, location } = usePageContext()
-
-  return (
-    <ApolloQuery
-      context={getQueryContext({ location, lang, pageContent })}
-      {...props}
-    >
-      {apolloProps =>
-        prefetch ? (
-          <PrefetchHandler {...apolloProps}>{children}</PrefetchHandler>
-        ) : (
-          children(apolloProps)
-        )
-      }
-    </ApolloQuery>
-  )
+export function Query({ prefetch = true, ...props }) {
+  const operationProps = useOperationProps({ prefetch, ...props })
+  return <ApolloQuery {...operationProps} />
 }

packages/smooth/src/query/Query.js

@@ -1 +1,2 @@
 export { Query } from './Query'
+export { Mutation } from './Mutation'

packages/smooth/src/query/index.js

@@ -0,0 +1,53 @@
+import React, { useEffect, useCallback, useRef } from 'react'
+import qs from 'query-string'
+import { usePageContext } from '../page/PageContext'
+import { usePause } from '../router/HiddenRouter'
+
+function PrefetchHandler({ children, ...props }) {
+  const unpause = usePause()
+  useEffect(() => {
+    if (!props.loading) {
+      unpause()
+    }
+  }, [props.loading, unpause])
+  return children(props)
+}
+
+function useOperationContext(props) {
+  const { lang, location } = usePageContext()
+  const headers = {}
+
+  if (lang) {
+    headers['x-smooth-lang'] = lang
+  }
+
+  if (props.pageContent) {
+    const { id, preview } = qs.parse(location.search)
+    if (preview) {
+      headers['x-smooth-preview-id'] = id
+      headers['x-smooth-preview'] = 1
+    }
+  }
+
+  return { headers }
+}
+
+function useRequestHandler(props) {
+  const propsRef = useRef({})
+  propsRef.current = props
+  return useCallback(result => {
+    if (propsRef.current.prefetch)
+      return (
+        <PrefetchHandler {...result}>
+          {propsRef.current.children}
+        </PrefetchHandler>
+      )
+    return propsRef.current.children(result)
+  }, [])
+}
+
+export function useOperationProps(props) {
+  const context = useOperationContext(props)
+  const children = useRequestHandler(props)
+  return { ...props, context, children }
+}