added useQuery, useMutation, Provider, and URLContext

Author: Alex Cory

src/Provider.tsx

@@ -0,0 +1,34 @@
+import React, { useState, useEffect, useMemo, ReactElement } from 'react'
+import useSSR from 'use-ssr'
+import URLContext from './URLContext'
+
+interface FetchProviderProps {
+	url?: string,
+	options?: RequestInit,
+	children: ReactElement,
+	graphql?: boolean,
+}
+
+export const Provider = ({ url, options, graphql = false, children }: FetchProviderProps): ReactElement => {
+	const { isBrowser } = useSSR()
+	const [defaultURL, setURL] = useState(url || '')
+
+	useEffect(() => {
+		if (isBrowser && !url) setURL(window.location.origin)
+	}, [url, isBrowser])
+
+	const defaults = useMemo(
+    () => ({
+      url: defaultURL,
+			options: options || {},
+			graphql, // TODO: this will make it so useFetch(QUERY || MUTATION) will work
+    }),
+    [url, options, graphql],
+  )
+
+	return (
+		<URLContext.Provider value={defaults}>
+			{children}
+		</URLContext.Provider>
+	)
+}

src/URLContext.ts

@@ -0,0 +1,10 @@
+import { createContext } from 'react'
+
+
+export const URLContext = createContext({
+  url: typeof window !== 'undefined' ? window.location.origin : '',
+  options: {},
+  graphql: false, // TODO: this will make it so useFetch(QUERY || MUTATION) will work
+})
+
+export default URLContext

src/index.ts

@@ -5,3 +5,7 @@ export * from './usePost'
 export * from './usePut'
 export * from './usePatch'
 export * from './useDelete'
+export * from './useMutation'
+export * from './useQuery'
+export * from './Provider'
+export * from './URLContext'

src/useFetch.ts

@@ -1,4 +1,5 @@
-import { useEffect, useState, useCallback, useRef, MutableRefObject, useMemo } from 'react'
+import { useEffect, useState, useCallback, useRef, useContext, MutableRefObject, useMemo } from 'react'
+import URLContext from './URLContext'
 
 const isObject = (obj: any) => Object.prototype.toString.call(obj) === '[object Object]'
 
@@ -10,8 +11,11 @@ export interface Options {
   baseUrl?: string
 }
 
-export function useFetch(arg1: string | Options & RequestInit, arg2: Options) {
-  let url: string | null = null
+type useFetchArg1 = string | Options & RequestInit
+
+export function useFetch(arg1: useFetchArg1, arg2?: Options | RequestInit) {
+  const context = useContext(URLContext)
+  let url: string | null = context.url || null
   let options = {} as { signal?: AbortSignal | null } & RequestInit
   let onMount = false
   let baseUrl = ''
@@ -24,15 +28,19 @@ export function useFetch(arg1: string | Options & RequestInit, arg2: Options) {
       let { url, onMount, timeout, baseUrl, ...rest } = opts
       options = { signal: undefined, ...rest }
     }
-    if (opts.url) url = opts.url
+    if (context.url) url = context.url
+    if (opts.url) url = opts.url || context.url
     if (opts.onMount) onMount = opts.onMount
     if (opts.method) method = opts.method
     if (opts.baseUrl) baseUrl = opts.baseUrl
   }
 
   if (typeof arg1 === 'string') {
-    url = arg1
-    if (isObject(arg2)) handleOptions(arg2)
+    // if we have a default url from context, and
+    // arg1 is a string, we treat it as a relative route
+    url = context.url ? context.url + arg1 : arg1
+
+    if (arg2 && isObject(arg2)) handleOptions(arg2)
   } else if (isObject(arg1)) {
     handleOptions(arg1)
   }

src/useMutation.js

@@ -0,0 +1,21 @@
+import useFetch, { URLContext } from '.'
+import { useContext, useCallback } from 'react';
+
+
+export const useMutation = (arg1: string, arg2: string) => {
+  const context = useContext(URLContext)
+
+  let url = arg1
+  let MUTATION = arg2
+
+  if (arg1 && !arg2 && context.url) {
+    url = context.url
+    MUTATION = arg1
+  }
+
+  const request = useFetch(url)
+
+  const mutate = useCallback(inputs => request.mutate(MUTATION, inputs), [])
+
+  return Object.assign([request.data, request.loading, request.error, mutate], { ...request, mutate })
+}

src/useMutation.ts

@@ -0,0 +1,21 @@
+import useFetch, { URLContext } from '.'
+import { useContext, useCallback } from 'react';
+
+
+export const useQuery = (arg1: string, arg2: string) => {
+  const context = useContext(URLContext)
+
+  let url = arg1
+  let QUERY = arg2
+
+  if (arg1 && !arg2 && context.url) {
+    url = context.url
+    QUERY = arg1
+  }
+
+  const request = useFetch(url)
+
+  const query = useCallback(inputs => request.query(QUERY, inputs), [])
+
+  return Object.assign([request.data, request.loading, request.error, query], { ...request, query })
+}