diff --git a/src/renderer/app.js b/src/renderer/app.js
index 4bb6b3fb..04b64fa5 100644
--- a/src/renderer/app.js
+++ b/src/renderer/app.js
@@ -5,7 +5,7 @@ import { StylesProvider, ThemeProvider } from '@material-ui/styles'
import { IntlProvider } from 'react-intl'
import isDev from 'electron-is-dev'
import CssBaseline from '@material-ui/core/CssBaseline'
-
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
import logger from '../logger'
import theme from './theme'
import Home from './components/Home'
@@ -48,6 +48,8 @@ const App = () => {
const [locale, setLocale] = React.useState(initialLocale)
const [backendState, setBackendState] = React.useState('loading')
+ const queryClient = new QueryClient()
+
React.useEffect(() => {
ipcRenderer
.invoke('get-backend-state')
@@ -87,7 +89,9 @@ const App = () => {
-
+
+
+
diff --git a/src/renderer/hooks/useMapServerMutation.js b/src/renderer/hooks/useMapServerMutation.js
new file mode 100644
index 00000000..804c9cc0
--- /dev/null
+++ b/src/renderer/hooks/useMapServerMutation.js
@@ -0,0 +1,23 @@
+import ky from 'ky/umd'
+import { useMutation, useQueryClient } from '@tanstack/react-query'
+
+const MAP_SERVER_URL = 'http://127.0.0.1:' + window.mapServerPort
+
+/**
+ * @param {string} resourcePath
+ * @param {'post' | 'put' | 'delete'}
+ */
+export function useMapServerMutation (resourcePath, mutationType) {
+ const queryClient = useQueryClient()
+ const kyFunction = path =>
+ mutationType === 'post'
+ ? ky.post(path)
+ : mutationType === 'put'
+ ? ky.put(path)
+ : ky.delete(path)
+
+ return useMutation({
+ mutationFn: () => kyFunction(MAP_SERVER_URL + resourcePath),
+ onSuccess: queryClient.invalidateQueries({ queryKey: resourcePath })
+ })
+}
diff --git a/src/renderer/hooks/useMapServerQuery.js b/src/renderer/hooks/useMapServerQuery.js
index 3da249b0..fd60f05a 100644
--- a/src/renderer/hooks/useMapServerQuery.js
+++ b/src/renderer/hooks/useMapServerQuery.js
@@ -1,17 +1,22 @@
+// @ts-check
import ky from 'ky/umd'
import { useQuery } from '@tanstack/react-query'
// local host
// global port number
-
const MAP_SERVER_URL = 'http://127.0.0.1:' + window.mapServerPort
/**
- * @param {'/styles' | `/styles/${string}` | '/tiles' | `/tiles/${string}`} resourcePath URL path to resource on Map Server (needs to start with `/`)
+ * @param {'/styles' | `/styles/${string}` | '/tilesets' | `/tilesets/${string}`} resourcePath URL path to resource on Map Server (needs to start with `/`)
*/
-export default function useMapServerQuery (resourcePath) {
+export function useMapServerQuery (resourcePath) {
return useQuery({
queryKey: [resourcePath],
- queryFn: () => ky.get(MAP_SERVER_URL + resourcePath)
+ queryFn: () => ky.get(MAP_SERVER_URL + resourcePath).json()
})
}
+
+/**
+ * @type {import('@tanstack/react-query').UseQueryResult>}
+ */
+const { data } = useMapServerQuery('/styles')
diff --git a/src/renderer/hooks/useMapServerQueryWithImplicitTypings.js b/src/renderer/hooks/useMapServerQueryWithImplicitTypings.js
new file mode 100644
index 00000000..5adf8394
--- /dev/null
+++ b/src/renderer/hooks/useMapServerQueryWithImplicitTypings.js
@@ -0,0 +1,26 @@
+// @ts-check
+import ky from 'ky/umd'
+import { useQuery } from '@tanstack/react-query'
+
+// local host
+// global port number
+const MAP_SERVER_URL = 'http://127.0.0.1:' + window.mapServerPort
+
+const apiLayer = () => {
+ function getStylesFn () {
+ /**
+ * @type {Promise>}
+ */
+ const listSyles = ky.get(MAP_SERVER_URL + '/styles').json()
+ return listSyles
+ }
+
+ return {
+ getStyle: getStylesFn
+ }
+}
+
+const { data } = useQuery({
+ queryKey: ['listStyle'],
+ queryFn: apiLayer().getStyle
+})
diff --git a/src/utils/types.d.ts b/src/utils/types.d.ts
index 001bc95c..72bf02be 100644
--- a/src/utils/types.d.ts
+++ b/src/utils/types.d.ts
@@ -20,8 +20,3 @@ export type MapeoCoreOptions = {
export type MapPrinterOptions = {
mapPrinterPort: number
}
-
-export type MapServerOptions = {
- mapServerPort: number
- mapsdir: string
-}