@decathlon/moon - npm Package Compare versions

Comparing version 4.0.0-beta-2 to 4.0.0-beta-3

package.json

 {
   "name": "@decathlon/moon",
-  "version": "4.0.0-beta-2",
+  "version": "4.0.0-beta-3",
   "description": "A featured, production ready caching REST client for every React UI",
@@ -24,3 +24,3 @@ "author": "Decathlon",
     "react": "^16.12.0",
-    "react-query": "3.2.0-beta.3"
+    "react-query": "3.2.0-beta.6"
   },
@@ -57,3 +57,3 @@ "scripts": {
   },
-  "gitHead": "7b01fd50b37c294696b0ed7e7e0abbda8ac07c65"
+  "gitHead": "da095ec6c3bf464710927af1417a22a85c32d9a5"
 }

README.md

@@ -1,2 +0,2 @@
-# <img src='images/moon-title.png' height='50' alt='Moon Logo'/>
+# <img src='../../images/moon-title.png' height='50' alt='Moon Logo'/>
 
@@ -14,4 +14,34 @@ _**The power of react-query with your favorite HTTP Client**_
 
-## Installation for Axios client
 
+Table of contents
+=================
+
+<!--ts-->
+   * [Installation](#installation)
+   * [Usage](#usage)
+      * [Query](#query-component)
+      * [useQuery](#usequery)
+      * [useInfiniteQuery](#useinfinitequery)
+      * [Mutation / useMutation](#mutationusemutation)
+   * [Other useful Hooks](#other-useful-hooks)
+      * [useQueryState](#usequeryresult)
+      * [useQueriesStates](#usequeriesstates)
+      * [useQueryResult](#usequeryresult)
+      * [useQueriesResults](#usequeriesresults)
+      * [useMoon](#usemoon)
+   * [HOCs](#hocs)
+      * [withQueryResult](#withqueryresult)
+      * [withQueriesResults](#withqueriesresults)
+   * [Query props](#query-props)
+   * [InfiniteQuery props](#infinitequery-props)
+   * [Mutation props](#mutation-props)
+   * [Moon config](#moon-config)
+   * [Demo](#demo)
+   * [Getting Started (Devs)](#gettingstarteddevs)
+      * [Running the tests](#running-the-tests)
+      * [Contributing](#contributing)
+<!--te-->
+
+Installation for Axios client
+============================
 ```bash
@@ -21,4 +51,6 @@ npm install @decathlon/moon @decathlon/moon-axios react-query axios --save
 
-## Usage
 
+Usage
+=====
+
 You get started by create REST links. A link is an object which need an id and an HTTP client config like the AxiosConfig (that extends the Moon's ClientConfig) of your REST server (for more information about the REST link config please see the **Moon config** section).
@@ -53,3 +85,4 @@
 
-#### Query Component
+Query
+-----
 
@@ -78,3 +111,4 @@ ```js
 
-#### useQuery hook
+useQuery
+--------
 
@@ -87,3 +121,3 @@ The same query with the **useQuery** hook
 const MyComponent = () => {
-  const [{ refetch }, { isLoading, error }] = useQuery<QueryVariables, QueryData, QueryError>({
+  const [{ isLoading, error }, { refetch }] = useQuery<QueryVariables, QueryData, QueryError>({
     id: "queryId",
@@ -104,3 +138,4 @@ source: "FOO",
 
-#### useInfiniteQuery
+useInfiniteQuery
+---------------
 
@@ -120,3 +155,3 @@ ```js
 const MyComponent = () => {
-  const [, { isLoading, error, data }] = useInfiniteQuery<QueryVariables, PageVariables, QueryData, QueryError>({
+  const [{ isLoading, error, data }] = useInfiniteQuery<QueryVariables, PageVariables, QueryData, QueryError>({
     source: "FOO",
@@ -147,3 +182,4 @@ endPoint: "/comments",
 
-#### Mutation / useMutation
+Mutation useMutation
+---------------------
 
@@ -189,8 +225,9 @@ Now that we've learned how to fetch data with the Query/useQuery component/hook, the next step is to learn how to mutate that data with mutations. For that we need to use the Mutation/useMutation component/hook.
 
-## Other useful Hooks
+Other useful Hooks
+==================
 
 Sometimes we need to retrieve the state/result of a query in another component. useQueryResult/useQueriesResult/useQueryState/useQueriesStates allows you to do this. For that, it is enough to give him the id/ids of the query/queries:
 
-### useQueryState
-
+useQueryState
+-------------
 Updated when the query state is changed. The optional **stateToProps** function is used for selecting the part of the data from the query state that the connected component needs. 
@@ -203,3 +240,4 @@
   const stateToProps = (queryState) => queryState // optional
-  const { isFetching } = useQueryState("queryId", stateToProps);
+  const isInfinite = true // optional - true if the it's an infinite query (default value === false)
+  const { isFetching } = useQueryState("queryId", stateToProps, isInfinite);
   return <span>{isFetching ? "Loading..." : "success"}</span>;
@@ -209,3 +247,3 @@ };
 
-The first prop is the query id used by the query. If the query is defined without an id then the id generated by default must be used. To generate an identifier, you must use the **getQueryId** utility. The default id is generated from the source, the endPoint, the variables and the options props.
+The first prop is the query id used by the query. If the query is defined without an id then the id generated by default must be used. To generate an identifier, you must use the **getQueryId** utility. The default id is generated from the source, the endPoint and the variables props of the query.
 
@@ -223,3 +261,4 @@ ```js
 
-### useQueriesStates
+useQueriesStates
+----------------
 
@@ -238,3 +277,4 @@ Updated when one of the query states is changed.The optional **statesToProps** function is used for selecting the part of the data from the query state that the connected component needs.
 
-### useQueryResult
+useQueryResult
+--------------
 
@@ -247,4 +287,5 @@ Updated only when the query result is changed. .The optional **resultToProps** function is used for selecting the part of the data from the query result that the connected component needs.
 const MyComponent = () => {
-  const resultToProps = (queryResult) => queryResult
-  const result = useQueryResult("queryId", resultToProps);
+  const resultToProps = (queryResult) => queryResult // optional
+  const isInfinite = true // optional - true if the it's an infinite query (default value === false)
+  const result = useQueryResult("queryId", resultToProps, isInfinite);
   return <span>{...result...}</span>;
@@ -254,3 +295,4 @@ };
 
-### useQueriesResults
+useQueriesResults
+-----------------
 
@@ -268,3 +310,4 @@ Updated only when one of the query results is changed. The optional **statesToProps** function is used for selecting the part of the data from the queries results that the connected component needs.
 ```
-### useMoon
+useMoon
+-------
 
@@ -280,9 +323,11 @@ You can use the moon client directly like this:
   client.mutate(...);
-  // the store is the queryCache of the react-query API
+  // the store is the queryClient of the react-query API
 };
 ```
 
-## HOCs
+HOCs
+======
 
-### withMoon
+withMoon
+--------
 
@@ -305,3 +350,4 @@ Same as useMoon hook.
 
-### withQueryResult
+withQueryResult
+--------------
 
@@ -326,3 +372,4 @@ Same as useQueryResult hook.
 
-### withQueriesResults
+withQueriesResults
+------------------
 
@@ -348,3 +395,4 @@ Same as useQueriesResults hook.
 
-## Moon provider props
+Moon provider props
+===================
 
@@ -364,4 +412,4 @@ ```js
 
-## Query options
-
+Query props
+===========
 This the Typescript interface of the Query/useQuery component/hook.
@@ -400,3 +448,4 @@
 
-## InfiniteQuery options
+InfiniteQuery props
+===================
 
@@ -419,3 +468,4 @@ ```js
 
-## Mutation options
+Mutation props
+===============
 
@@ -445,3 +495,4 @@ This the Typescript interface of the Mutation/useMutation component/hook.
 ```
-## Moon config
+Moon config
+===========
 
@@ -486,5 +537,12 @@ For each Moon link we can add interceptors (middleware: language, api token, success Handler....) for the request and/or the response like this:
 
+Demo
+====
 
-## Getting Started (Devs)
+- [Basic](https://codesandbox.io/s/moon-basic-u8042)
 
+- [Infinite / Load more](https://codesandbox.io/s/moon-infinite-query-zqqw0)
+
+Getting Started Devs
+======================
+
 ```bash
@@ -496,4 +554,4 @@ git clone ...
 
-## Running the tests
-
+Running the tests
+-----------------
 ```bash
@@ -503,3 +561,4 @@ npm run test
 
-## Contributing
+Contributing
+------------
 
@@ -506,0 +565,0 @@ **PRs are welcome!**

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

161012

increased by1%

Number of lines in readme file

556

increased by11.87%

No dependency changes