use-http - npm Package Compare versions

Comparing version 0.1.65 to 0.1.66

dist/index.d.ts

@@ -8,1 +8,5 @@ export { default } from './useFetch';
 export * from './useDelete';
+export * from './useMutation';
+export * from './useQuery';
+export * from './Provider';
+export * from './URLContext';

dist/index.js

@@ -14,2 +14,6 @@ "use strict";
 __export(require("./useDelete"));
+__export(require("./useMutation"));
+__export(require("./useQuery"));
+__export(require("./Provider"));
+__export(require("./URLContext"));
 //# sourceMappingURL=index.js.map

dist/useFetch.d.ts

@@ -8,3 +8,4 @@ export interface Options {
 }
-export declare function useFetch(arg1: string | Options & RequestInit, arg2: Options): (boolean | {
+declare type useFetchArg1 = string | Options & RequestInit;
+export declare function useFetch(arg1: useFetchArg1, arg2?: Options | RequestInit): (boolean | {
     get: (fArg1?: string | object | undefined, fArg2?: string | object | undefined) => Promise<void>;
@@ -11,0 +12,0 @@ post: (fArg1?: string | object | undefined, fArg2?: string | object | undefined) => Promise<void>;

dist/useFetch.js

@@ -19,7 +19,12 @@ "use strict";
 };
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = require("react");
+const URLContext_1 = __importDefault(require("./URLContext"));
 const isObject = (obj) => Object.prototype.toString.call(obj) === '[object Object]';
 function useFetch(arg1, arg2) {
-    let url = null;
+    const context = react_1.useContext(URLContext_1.default);
+    let url = context.url || null;
     let options = {};
@@ -36,4 +41,6 @@ let onMount = false;
         }
+        if (context.url)
+            url = context.url;
         if (opts.url)
-            url = opts.url;
+            url = opts.url || context.url;
         if (opts.onMount)
@@ -47,4 +54,6 @@ onMount = opts.onMount;
     if (typeof arg1 === 'string') {
-        url = arg1;
-        if (isObject(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);
@@ -51,0 +60,0 @@ }

package.json

 {
   "name": "use-http",
-  "version": "0.1.65",
+  "version": "0.1.66",
   "homepage": "https://codesandbox.io/embed/km04k9k9x5",
@@ -72,4 +72,14 @@ "main": "dist/index.js",
     "mutation",
-    "query"
-  ]
+    "query",
+    "useAxios",
+    "use-axios",
+    "use-superagent",
+    "superagent",
+    "apollo",
+    "useGraphQL",
+    "use-graphql"
+  ],
+  "dependencies": {
+    "use-ssr": "^1.0.18"
+  }
 }

README.md

@@ -19,8 +19,20 @@
     </a>
-    <a href="https://github.com/alex-cory/use-http/releases">
-      <img alt="undefined" src="https://img.shields.io/github/release/alex-cory/use-http.svg?style=popout">
-    </a>
     <a href="https://bundlephobia.com/result?p=use-http">
       <img alt="undefined" src="https://img.shields.io/bundlephobia/minzip/use-http.svg">
     </a>
+    <a href="https://codeclimate.com/github/alex-cory/use-http/maintainability">
+      <img src="https://api.codeclimate.com/v1/badges/1e6c1ff8921b0f5ff6b3/maintainability" />
+    </a>
+    <a href="https://snyk.io/test/github/alex-cory/use-http?targetFile=package.json">
+      <img src="https://snyk.io/test/github/alex-cory/use-http/badge.svg?targetFile=package.json" alt="Known Vulnerabilities" data-canonical-src="https://snyk.io/test/github/alex-cory/use-http?targetFile=package.json" style="max-width:100%;">
+    </a>
+    <a href="https://www.npmjs.com/package/use-http">
+      <img src="https://img.shields.io/npm/v/use-http.svg" alt="Known Vulnerabilities" data-canonical-src="https://snyk.io/test/github/alex-cory/use-http?targetFile=package.json" style="max-width:100%;">
+    </a>
+    <a href="https://github.com/alex-cory/use-http/blob/master/license.md">
+      <img alt="undefined" src="https://img.shields.io/github/license/alex-cory/use-http.svg">
+    </a>
+    <a href="https://greenkeeper.io/">
+      <img alt="undefined" src="https://badges.greenkeeper.io/alex-cory/use-http.svg">
+    </a>
 </p>
@@ -37,4 +49,14 @@
 
+Features
+---------
+
+- SSR (server side rendering) support
+- TypeScript support
+- 1 dependency ([use-ssr](https://github.com/alex-cory/use-ssr))
+- GraphQL support (queries + mutations)
+- Provider to set default a `url` and `options`
+
 ### Examples
-- <a target="_blank" rel="noopener noreferrer" href='https://codesandbox.io/embed/km04k9k9x5'>Code Sandbox Example</a>
+- <a target="_blank" rel="noopener noreferrer" href='https://codesandbox.io/s/usefetch-in-nextjs-nn9fm'>Example - Next.js</a>
+- <a target="_blank" rel="noopener noreferrer" href='https://codesandbox.io/embed/km04k9k9x5'>Examples - create-react-app</a>
 
@@ -149,3 +171,3 @@ Installation
 
-const App = () => {
+function App() {
   const request = useFetch('http://example.com')
@@ -163,2 +185,3 @@
 ```
+
 #### GraphQL Mutation
@@ -176,3 +199,3 @@ ```jsx
 
-const App = () => {
+function App() {
   const [todoTitle, setTodoTitle] = useState('')
@@ -193,2 +216,79 @@ const request = useFetch('http://example.com')
 
+#### `Provider` using the GraphQL `useMutation` and `useQuery`
+
+The `Provider` allows us to set a default `url`, `options` (such as headers) and so on.
+
+##### Query for todos
+```jsx
+import { Provider, useQuery, useMutation } from 'use-http'
+
+function QueryComponent() {
+  const request = useQuery(`
+    query Todos($userID string!) {
+      todos(userID: $userID) {
+        id
+        title
+      }
+    }
+  `)
+
+  const getTodosForUser = id => request.query({ userID: id })
+  
+  return (
+    <>
+      <button onClick={() => getTodosForUser('theUsersID')}>Get User's Todos</button>
+      {!request.loading ? 'Loading...' : <pre>{request.data}</pre>}
+    </>
+  )
+}
+```
+
+##### Add a new todo
+```jsx
+function MutationComponent() {
+  const [todoTitle, setTodoTitle] = useState('')
+  
+  const [data, loading, error, mutate] = useMutation(`
+    mutation CreateTodo($todoTitle string) {
+      todo(title: $todoTitle) {
+        id
+        title
+      }
+    }
+  `)
+  
+  const createtodo = () => mutate({ todoTitle })
+
+  return (
+    <>
+      <input onChange={e => setTodoTitle(e.target.value)} />
+      <button onClick={createTodo}>Create Todo</button>
+      {!loading ? 'Loading...' : <pre>{data}</pre>}
+    </>
+  )
+}
+```
+
+
+##### Adding the Provider
+These props are defaults used in every request inside the `<Provider />`. They can be overwritten individually
+```jsx
+function App() {
+
+  const options = {
+    headers: {
+      Authorization: 'Bearer:asdfasdfasdfasdfasdafd'
+    }
+  }
+  
+  return (
+    <Provider url='http://example.com' options={options}>
+      <QueryComponent />
+      <MutationComponent />
+    <Provider/>
+  )
+}
+
+```
+
 #### The Goal With Suspense <sup><strong>(not implemented yet)</strong></sup>
@@ -198,3 +298,3 @@ ```jsx
 
-const WithSuspense = () => {
+function WithSuspense() {
   const suspense = useFetch('https://example.com')
@@ -211,3 +311,3 @@
 
-const App = () => (
+function App() (
   <ConcurrentMode>
@@ -231,2 +331,4 @@ <Suspense fallback="Loading...">
 | `useDelete` | Defaults to a DELETE request |
+| `useQuery` | For making a GraphQL query |
+| `useMutation` | For making a GraphQL mutation |
 
@@ -295,2 +397,7 @@ Options
 ------
+ - [x] port to typescript
+ - [x] badges
+ - [X] if no url is specified, and we're in the browser, use `window.location.origin`
+ - [X] support for a global context config where you can set base url's (like Apollo's `client`) but better 😉
+ - [X] add GraphQL `useQuery`, `useMutation`
  - [ ] Make work with React Suspense [current example WIP](https://codesandbox.io/s/7ww5950no0)
@@ -305,9 +412,7 @@ - [ ] get it all working on a SSR codesandbox, this way we can have api to call locally
  - [ ] tests
- - [x] port to typescript
- - [x] badges
- - [ ] if no url is specified, and we're in the browser, use `window.location.href`
  - [ ] github page/website
- - [ ] support for a global context config where you can set base url's (like Apollo's `client`) but better 😉
- - [ ] add GraphQL `useQuery`, `useMutation`
+ - [ ] fix code so Maintainability is A
+ - [ ] optimize badges [see awesome badge list](https://github.com/boennemann/badges)
  - [ ] make GraphQL work with React Suspense
+ - [ ] make GraphQL examples
 #### Mutations with Suspense <sup>(Not Implemented Yet)</sup>
@@ -317,2 +422,3 @@ ```jsx
   const [todoTitle, setTodoTitle] = useState('')
+  // if there's no <Provider /> used, useMutation works this way
   const mutation = useMutation('http://example.com', `
@@ -319,0 +425,0 @@ mutation CreateTodo($todoTitle string) {

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

192613

increased by515.2%

Number of package files

36

increased by50%

Lines of code

2130

increased by709.89%

Number of lines in readme file

434

increased by32.32%

Worsened metrics

Dependency count

3

increased by50%

Number of medium supply chain risk alerts

2

increased by100%

Dependency changes

• + Addeduse-ssr@^1.0.18

• + Addeduse-ssr@1.0.25(transitive)