diff --git a/README.md b/README.md index 1d3f7316..52885a90 100644 --- a/README.md +++ b/README.md @@ -50,10 +50,15 @@ import { useGet } from "restful-react"; const MyComponent = () => { const { data: randomDogImage } = useGet({ - path: "https://dog.ceo/api/breeds/image/random", + path: "https://dog.ceo/api/breeds/image/random" }); - return Here's a good boye!; + return ( + Here's a good boye! + ); }; export default MyComponent; @@ -70,7 +75,7 @@ import { useGet } from "restful-react"; const App = () => { const { data: randomDogImage } = useGet({ - path: "https://dog.ceo/api/breeds/image/random", + path: "https://dog.ceo/api/breeds/image/random" }); return ( <> @@ -78,7 +83,7 @@ const App = () => { )} @@ -133,16 +138,21 @@ import { useGet } from "restful-react"; const MyComponent = () => { const { data: randomDogImage } = useGet({ // Inferred from RestfulProvider in index.js - path: "breeds/image/random", + path: "breeds/image/random" }); - return Here's a good boye!; + return ( + Here's a good boye! + ); }; export default MyComponent; ``` -Naturally, the request will be sent to the full path `https://dog.ceo/api/breeds/image/random`. The full API of the `RestfulProvider` is outlined below. Each configuration option is composable and _can be_ overriden by `Get` components further down the tree. +Naturally, the request will be sent to the full path `https://dog.ceo/api/breeds/image/random`. The full API of the `RestfulProvider` is outlined below. Each configuration option is composable and _can be_ overridden by `Get` components further down the tree. #### `RestfulProvider` API @@ -174,7 +184,20 @@ export interface RestfulReactProviderProps { * Depending of your case, it can be easier to add a `localErrorOnly` on your `Mutate` component * to deal with your retry locally instead of in the provider scope. */ - onError?: (err: any, retry: () => Promise, response?: Response) => void; + onError?: ( + err: any, + retry: () => Promise, + response?: Response + ) => void; + /** + * Any global level query params? + * **Warning:** it's probably not a good idea to put API keys here. Consider headers instead. + */ + queryParams?: { [key: string]: any }; + /* + * Allows to obtain the Provider and/or the Consumer name + */ + displayName?: String; } // Usage @@ -182,6 +205,8 @@ export interface RestfulReactProviderProps { base="String!" resolve={data => data} requestOptions={authToken => ({ headers: { Authorization: authToken } })} + queryParams={{ myParam: true }} + displayName="MyAwesomeProvider" />; ``` @@ -199,10 +224,14 @@ import { useGet } from "restful-react"; const MyComponent = () => { const { data: randomDogImage, loading } = useGet({ - path: "https://dog.ceo/api/breeds/image/random", + path: "https://dog.ceo/api/breeds/image/random" }); - return loading ?

Loading...

: Here's a good boye!; + return loading ? ( +

Loading...

+ ) : ( + Here's a good boye! + ); }; export default MyComponent; @@ -221,7 +250,7 @@ import { useGet } from "restful-react"; const MyComponent = () => { const { data: randomDogImage, loading, refetch } = useGet({ path: "https://dog.ceo/api/breeds/image/random", - lazy: true, + lazy: true }); return !randomDogImage && loading ? ( @@ -232,7 +261,11 @@ const MyComponent = () => {

Welcome to my image getter!

-
{randomDogImage && Here's a good boye!}
+
+ {randomDogImage && ( + Here's a good boye! + )} +
); }; @@ -257,7 +290,7 @@ import { useGet } from "restful-react"; const MyComponent = () => { const { data: imageUrl } = useGet({ path: "https://dog.ceo/api/breeds/image/random", - resolve: image => image && image.message, + resolve: image => image && image.message }); return imageUrl && Here's a good boye!; @@ -278,7 +311,7 @@ Here's an example: const SearchThis = props => { const { data } = useGet({ path: "/hello/world", - debounce: true, + debounce: true }); return ( @@ -339,7 +372,7 @@ const SearchThis = props => { ### TypeScript Integration -One of the most poweful features of `restful-react` is that each component exported is strongly typed, empowering developers through self-documenting APIs. +One of the most powerful features of `restful-react` is that each component exported is strongly typed, empowering developers through self-documenting APIs. ![Using restful-react in VS Code](assets/labs.gif) @@ -367,7 +400,7 @@ const ListItem = ({ id, children }) => { const { mutate: del, loading } = useMutate({ verb: "DELETE", path: `/posts/`, - base, + base }); return ( @@ -375,7 +408,15 @@ const ListItem = ({ id, children }) => { {loading ? ( "Deleting..." ) : ( - )} @@ -387,7 +428,7 @@ const ListItem = ({ id, children }) => { const MyHugeList = () => { const { data: posts } = useGet({ path: "/posts", - base, + base }); return (
@@ -448,7 +489,12 @@ import { Poll } from "restful-react" Below is a more convoluted example that employs nearly the full power of the `Poll` component. ```jsx - response && response.ok} interval={0} lazy> + response && response.ok} + interval={0} + lazy +> {(_, { loading, error, finished, polling }, { start }) => { return loading ? ( @@ -473,7 +519,7 @@ Below is a more convoluted example that employs nearly the full power of the `Po ``` -Note from the previous example, `Poll` also exposes more states: `finished`, and `polling` that allow better flow control, as well as lazy-start polls that can also be programatically stopped at a later stage. +Note from the previous example, `Poll` also exposes more states: `finished`, and `polling` that allow better flow control, as well as lazy-start polls that can also be programmatically stopped at a later stage. #### Long Polling @@ -600,14 +646,14 @@ module.exports = inputSchema => ({ (pathItemMem, [verb, operation]) => ({ ...pathItemMem, [verb]: { - ...fixOperationId(path, verb, operation), - }, + ...fixOperationId(path, verb, operation) + } }), - {}, - ), + {} + ) }), - {}, - ), + {} + ) }); ``` @@ -649,17 +695,17 @@ module.exports = { output: "src/queries/myFirstBackend.tsx", file: "specs/my-first-backend.yaml", customProps: { - base: `"http://my-first-backend.com"`, - }, + base: `"http://my-first-backend.com"` + } }, configurableBackend: { output: "src/queries/configurableBackend.tsx", github: "contiamo:restful-react:master:docs/swagger.json", customImport: `import { getConfig } from "../components/Config.tsx";`, customProps: { - base: `{getConfig("backendBasePath")}`, - }, - }, + base: `{getConfig("backendBasePath")}` + } + } }; ``` diff --git a/src/Context.tsx b/src/Context.tsx index e34e5a94..5bdaca25 100644 --- a/src/Context.tsx +++ b/src/Context.tsx @@ -32,6 +32,10 @@ export interface RestfulReactProviderProps { * **Warning:** it's probably not a good idea to put API keys here. Consider headers instead. */ queryParams?: { [key: string]: any }; + /* + * Allows to obtain the Provider and/or the Consumer name + */ + displayName?: String; } export const Context = React.createContext>({ @@ -41,6 +45,7 @@ export const Context = React.createContext>( requestOptions: {}, onError: noop, queryParams: {}, + displayName: "", }); export interface InjectedProps { @@ -58,6 +63,7 @@ export default class RestfulReactProvider extends React.Component