Add logo to manifest.json and add rqc,rqct,rqs,iq snippets

Author: sayinserdar

README.md

@@ -21,13 +21,17 @@ This extension aims to accelerate development speed in projects that use React Q
 
 Here you can see the available snippets for now.
 
-| Snippet | Content                                                |
-| ------: | ------------------------------------------------------ |
-|    `uq` | Generates **useQuery** with API call                   |
-|    `um` | Generates **useMutation** with API call                |
-|   `uiq` | Generates **useInfinteQueries** with API call          |
-|   `uqp` | Generates **useQuery** with one parameter and API call |
-|   `upq` | Generates **usePaginatedQuery** with API call          |
+| Snippet | Content                                                                |
+| ------: | ---------------------------------------------------------------------- |
+|    `uq` | Generates **useQuery** with API call                                   |
+|    `um` | Generates **useMutation** with API call                                |
+|   `uiq` | Generates **useInfinteQueries** with API call                          |
+|   `uqp` | Generates **useQuery** with one parameter and API call                 |
+|   `upq` | Generates **usePaginatedQuery** with API call                          |
+|   `rqc` | Generates a functional component with possible outcomes                |
+|  `rqct` | Generates a functional component with possible outcomes (ternary)      |
+|   `rqs` | Generates an if statement with status                                  |
+|    `iq` | Generates **queryCache.invalidateQueries** invalidateQueries statement |
 
 ## License
 

package.json

@@ -9,6 +9,7 @@
   "categories": [
     "Snippets"
   ],
+  "icon": "https://upload.wikimedia.org/wikipedia/commons/a/a7/React-icon.svg",
   "publisher": "sayinserdar",
   "contributes": {
     "snippets": [
@@ -24,4 +25,4 @@
     ]
   },
   "repository": "https://github.com/sayinserdar/react-query-snippet.git"
-}
+}

snippets/snippets.code-snippets

@@ -86,5 +86,68 @@
       "})"
     ],
     "description": "React Query - useInfiniteQuery - https://react-query.tanstack.com/docs/api#usepaginatedquery"
+  },
+  "React query Functional Component Result": {
+    "prefix": "rqc",
+    "body": [
+      "",
+      "const ${1} = () => {",
+      "  if (status === 'idle') {",
+      "    return <span>Not ready... </span>;",
+      "  }",
+      "",
+      "  if (status === 'loading') {",
+      "    return (<span>Loading... </span>);",
+      "  }",
+      "  if (status === 'error ') {",
+      "    return (",
+      "      <span>",
+      "        Error:",
+      "        {error.message}",
+      "      </span>",
+      "    );",
+      "  }",
+      "",
+      "  if (data) {",
+      "    return (",
+      "      <div>{data}</div>",
+      "    );",
+      "  }",
+      "  return null;",
+      "};"
+    ],
+    "description": "rqc"
+  },
+  "rqct": {
+    "prefix": "rqct",
+    "body": [
+      "{status === 'idle' ? (",
+      "  'Not ready...'",
+      ") : status === 'loading' ? (",
+      " <div>Loading...</div>",
+      ") : isError ? (",
+      "  <span>{error.message}</span>",
+      ") : (",
+      "  <div>{data}</div>",
+      "    ",
+      ")}"
+    ],
+    "description": "rqct"
+  },
+  "rqs": {
+    "prefix": "rqs",
+    "body": [
+      "if (status === 'idle') {",
+      "  return <span>Not ready...</span>;",
+      "}"
+    ],
+    "description": "rqs"
+  },
+  "iq": {
+    "prefix": "iq",
+    "body": [
+      "queryCache.invalidateQueries([${1},{${2}: ${3}}])"
+    ],
+    "description": "iq"
   }
-}
+}