feat: HTTP GET Support (#410)

* fix: remove .size-snapshot.json

* test: client.useGETForQueries & fetchOptionsOverrides.method=GET

* feat: GET support

* fix: update types

* fix: update fastify-ssr example, use GET for manualQuery example

* doc: update docs RE GET support

Co-authored-by: Guillermo Gonzalez <[email protected]>

Author: bmullan91

Diff for: .gitignore

@@ -8,4 +8,5 @@ dist
 es
 packages/graphql-hooks/README.md
 packages/*/LICENSE
-build
+build
+.size-snapshot.json

Diff for: README.md

@@ -102,6 +102,7 @@ function MyComponent() {
   - [SSR](#SSR)
   - [Pagination](#Pagination)
   - [File uploads](#File-uploads)
+  - [HTTP Get Support](#HTTP-Get-support)
   - [Authentication](#Authentication)
   - [Fragments](#Fragments)
   - [Migrating from Apollo](#Migrating-from-Apollo)
@@ -127,6 +128,7 @@ const client = new GraphQLClient(config)
 
 - `url` (**Required**): The url to your GraphQL server
 - `ssrMode`: Boolean - set to `true` when using on the server for server-side rendering; defaults to `false`
+- `useGETForQueries`: Boolean - set to `true` to use HTTP GET method for all queries; defaults to false. See [HTTP Get Support](#HTTP-Get-support) for more info
 - `cache` (**Required** if `ssrMode` is `true`, otherwise optional): Object with the following methods:
   - `cache.get(key)`
   - `cache.set(key, data)`
@@ -231,9 +233,9 @@ const { loading, error, data, refetch, cacheHit } = useQuery(QUERY)
   - `options`: Object - options that will be merged into the `options` that were passed into `useQuery` (see above).
 - `cacheHit`: Boolean - `true` if the query result came from the cache, useful for debugging
 - `error`: Object - Set if at least one of the following errors has occured and contains:
-  * `fetchError`: Object - Set if an error occurred during the `fetch` call
-  * `httpError`: Object - Set if an error response was returned from the server
-  * `graphQLErrors`: Array - Populated if any errors occurred whilst resolving the query
+  - `fetchError`: Object - Set if an error occurred during the `fetch` call
+  - `httpError`: Object - Set if an error response was returned from the server
+  - `graphQLErrors`: Array - Populated if any errors occurred whilst resolving the query
 
 ## `useManualQuery`
 
@@ -508,6 +510,34 @@ export default function PostForm() {
 }
 ```
 
+## HTTP Get support
+
+Using `GET` for queries can be useful, especially when implementing any sort of HTTP caching strategy. There are two ways you can do this:
+
+**Per Query**
+
+```js
+const { loading, error, data } = useQuery(MY_QUERY, {
+  fetchOptionsOverrides: { method: 'GET' }
+})
+
+// same goes for useManualQuery
+const [fetchSomething] = useManualQuery(MY_QUERY, {
+  fetchOptionsOverrides: { method: 'GET' }
+})
+```
+
+**For All Queries**
+
+When you create your client, set the `useGETForQueries` option as `true`:
+
+```js
+const client = new GraphQLClient({
+  url: '/graphql',
+  useGETForQueries: true
+}) 
+```
+
 ## Authentication
 
 Coming soon!
@@ -706,11 +736,14 @@ import { buildAxiosFetch } from '@lifeomic/axios-fetch'
 import { GraphQLClient } from 'graphql-hooks'
 
 const gqlAxios = axios.create()
-gqlAxios.interceptors.response.use(function (response) {
-  return response
-}, function (error) {
-  // Handle expired JWT and refresh token
-})
+gqlAxios.interceptors.response.use(
+  function(response) {
+    return response
+  },
+  function(error) {
+    // Handle expired JWT and refresh token
+  }
+)
 
 const client = new GraphQLClient({
   url: '/graphql',

Diff for: examples/fastify-ssr/src/app/pages/HomePage.js

@@ -37,7 +37,12 @@ function HomePage() {
   const [createUser] = useMutation(CREATE_USER_MUTATION)
 
   const [getFirstUser, { data: firstUserData }] = useManualQuery(
-    GET_FIRST_USER_QUERY
+    GET_FIRST_USER_QUERY,
+    {
+      fetchOptionsOverrides: {
+        method: 'GET'
+      }
+    }
   )
 
   async function createNewUser() {
@@ -73,7 +78,9 @@ function HomePage() {
         />
         <button onClick={createNewUser}>Create User</button>
       </div>
-      <button onClick={getFirstUser}>Manually trigger Query</button>
+      <button onClick={getFirstUser}>
+        Manually trigger Query via GET method
+      </button>
       <div>First User: {firstUserData && firstUserData.firstUser.name}</div>
     </div>
   )

Diff for: packages/graphql-hooks-memcache/.size-snapshot.json

@@ -10,6 +10,7 @@ export class GraphQLClient {
   ssrMode: boolean
   fetchOptions: object
   logErrors: boolean
+  useGETForQueries: boolean
 
   private onError(): any
   private fetch(): Promise<any>

Diff for: packages/graphql-hooks/.size-snapshot.json

@@ -30,6 +30,7 @@ class GraphQLClient {
     this.fetchOptions = config.fetchOptions || {}
     this.logErrors = config.logErrors !== undefined ? config.logErrors : true
     this.onError = config.onError
+    this.useGETForQueries = config.useGETForQueries === true
   }
 
   setHeader(key, value) {
@@ -129,6 +130,10 @@ class GraphQLClient {
       ...fetchOptionsOverrides
     }
 
+    if (fetchOptions.method === 'GET') {
+      return fetchOptions
+    }
+
     const { clone, files } = extractFiles(operation)
     const operationJSON = JSON.stringify(clone)
 
@@ -162,8 +167,28 @@ class GraphQLClient {
   }
 
   request(operation, options = {}) {
+    let url = this.url
+    const fetchOptions = this.getFetchOptions(
+      operation,
+      options.fetchOptionsOverrides
+    )
+
+    if (fetchOptions.method === 'GET') {
+      const paramsQueryString = Object.entries(operation)
+        .filter(([, v]) => !!v)
+        .map(([k, v]) => {
+          if (k === 'variables') {
+            v = JSON.stringify(v)
+          }
+
+          return `${k}=${encodeURIComponent(v)}`
+        })
+        .join('&')
+      url = url + '?' + paramsQueryString
+    }
+
     return this.fetch(
-      this.url,
+      url,
       this.getFetchOptions(operation, options.fetchOptionsOverrides)
     )
       .then(response => {

Diff for: packages/graphql-hooks/index.d.ts

@@ -81,6 +81,13 @@ function useClientRequest(query, initialOpts = {}) {
     operationName: initialOpts.operationName
   }
 
+  if (client.useGETForQueries && !initialOpts.isMutation) {
+    initialOpts.fetchOptionsOverrides = {
+      ...initialOpts.fetchOptionsOverrides,
+      method: 'GET'
+    }
+  }
+
   const cacheKey = client.getCacheKey(operation, initialOpts)
   const isDeferred = initialOpts.isMutation || initialOpts.isManual
   const initialCacheHit =