Skip to content

Commit

Permalink
apiclient sample
Browse files Browse the repository at this point in the history
  • Loading branch information
ctot-nondef committed Apr 25, 2024
1 parent 8f1032c commit 4035d47
Show file tree
Hide file tree
Showing 7 changed files with 1,659 additions and 1,211 deletions.
3 changes: 3 additions & 0 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,9 @@
node_modules/
.pnpm-store/

#generated libs
lib

# logs
*.log

Expand Down
1 change: 1 addition & 0 deletions nuxt.config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -76,6 +76,7 @@ export default defineNuxtConfig({
NODE_ENV: process.env.NODE_ENV,
public: {
NUXT_PUBLIC_APP_BASE_URL: process.env.NUXT_PUBLIC_APP_BASE_URL,
NUXT_PUBLIC_API_BASE_URL: process.env.NUXT_PUBLIC_API_BASE_URL,
NUXT_PUBLIC_BOTS: process.env.NUXT_PUBLIC_BOTS,
NUXT_PUBLIC_MATOMO_BASE_URL: process.env.NUXT_PUBLIC_MATOMO_BASE_URL,
NUXT_PUBLIC_MATOMO_ID: process.env.NUXT_PUBLIC_MATOMO_ID,
Expand Down
16 changes: 10 additions & 6 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@
"lint:code:fix": "pnpm run lint:code:check --fix",
"lint:styles:check": "stylelint \"./**/*.@(css|vue)\" --cache --ignore-path ./.gitignore",
"lint:styles:fix": "pnpm run lint:styles:check --fix",
"postinstall": "nuxt prepare",
"postinstall": "nuxt prepare && pnpm run createclient",
"preinstall": "npx only-allow pnpm",
"prepare": "run-s setup",
"setup": "is-ci || simple-git-hooks",
Expand All @@ -31,7 +31,8 @@
"test:e2e:install": "playwright install --with-deps",
"test:e2e:ui": "playwright test --ui",
"types:check": "nuxt typecheck",
"validate": "run-p format:check lint:check types:check test test:e2e"
"validate": "run-p format:check lint:check types:check test test:e2e",
"createclient": "pnpm openapi-zod-client \"https://frischmuth-dev.acdh-dev.oeaw.ac.at/apis/swagger/schema/?format=json\" -o \"./lib/api.ts\""
},
"dependencies": {
"@acdh-oeaw/lib": "^0.1.7",
Expand All @@ -52,14 +53,16 @@
"vue-i18n": "^9.10.2",
"vue-i18n-routing": "^1.2.0",
"vue-router": "^4.3.0",
"zod": "^3.22.4"
"zod": "^3.22.4",
"@zodios/core": "^10.9.6",
"@tanstack/vue-query": "^5.32.0"
},
"devDependencies": {
"@acdh-oeaw/eslint-config": "^1.0.7",
"@acdh-oeaw/eslint-config-nuxt": "^1.0.13",
"@acdh-oeaw/eslint-config-playwright": "^1.0.7",
"@acdh-oeaw/eslint-config-vue": "^1.0.12",
"@acdh-oeaw/prettier-config": "^2.0.0",
"@acdh-oeaw/prettier-config": "^1.0.1",
"@acdh-oeaw/stylelint-config": "^2.0.1",
"@acdh-oeaw/tailwindcss-preset": "^0.0.22",
"@acdh-oeaw/tsconfig": "^1.0.2",
Expand All @@ -77,14 +80,15 @@
"lint-staged": "^15.2.2",
"npm-run-all2": "^6.1.2",
"postcss": "^8.4.36",
"prettier": "^3.2.5",
"prettier": "^2.8.8",
"schema-dts": "^1.1.2",
"simple-git-hooks": "^2.11.0",
"stylelint": "^16.2.1",
"tailwindcss": "^3.4.1",
"typescript": "^5.4.2",
"vite": "^5.1.6",
"vue-tsc": "^2.0.6"
"vue-tsc": "^2.0.6",
"openapi-zod-client": "^1.16.2"
},
"browserslist": {
"development": [
Expand Down
20 changes: 20 additions & 0 deletions pages/index.vue
Original file line number Diff line number Diff line change
@@ -1,9 +1,25 @@
<script lang="ts" setup>
import { useQuery } from "@tanstack/vue-query";
defineRouteRules({
prerender: true,
});
const t = useTranslations();
const { $api } = useNuxtApp();
const { data, isFetching } = useQuery({
queryKey: ["worklist"] as const,
queryFn: async () => {
const response = await $api.api_work_preview_list({
queries: {
limit: 10,
offset: 0,
},
});
return response;
},
});
usePageMetadata({
title: t("IndexPage.meta.title"),
Expand All @@ -13,5 +29,9 @@ usePageMetadata({
<template>
<MainContent class="container py-8">
<h1>{{ t("IndexPage.title") }}</h1>
<span v-if="isFetching">Loading...</span>
<span v-else>
{{ data }}
</span>
</MainContent>
</template>
15 changes: 15 additions & 0 deletions plugins/api.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
import { createApiClient } from "../lib/api.ts";

export default defineNuxtPlugin({
name: "api",
setup() {
const config = useRuntimeConfig();
const apiBaseUrl = config.public.NUXT_PUBLIC_API_BASE_URL;
const client = createApiClient(apiBaseUrl);
return {
provide: {
api: client,
},
};
},
});
65 changes: 65 additions & 0 deletions plugins/query-client.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,65 @@
import { HttpError, log } from "@acdh-oeaw/lib";
import {
dehydrate,
type DehydratedState,
hydrate,
keepPreviousData,
QueryCache,
QueryClient,
VueQueryPlugin,
type VueQueryPluginOptions,
} from "@tanstack/vue-query";

export default defineNuxtPlugin((nuxt) => {
const state = useState<DehydratedState | null>("vue-query");

const queryClient = new QueryClient({
defaultOptions: {
queries: {
placeholderData: keepPreviousData,
staleTime: 1000 * 60 * 15,
},
},
queryCache: new QueryCache({
async onError(error) {
const message = await getErrorMessage(error);
log.error(message);
},
}),
});

const options: VueQueryPluginOptions = { queryClient };

nuxt.vueApp.use(VueQueryPlugin, options);

if (process.server) {
nuxt.hooks.hook("app:rendered", () => {
state.value = dehydrate(queryClient);
});
}

if (process.client) {
nuxt.hooks.hook("app:created", () => {
hydrate(queryClient, state.value);
});
}
});

async function getErrorMessage(error: Error): Promise<string> {
if (error instanceof HttpError) {
const mediaType = error.response.headers.get("content-type")?.split(";", 1).at(0);
if (mediaType === "application/json" && !error.response.bodyUsed) {
try {
const data = (await error.response.json()) as { message: string };

return data.message;
} catch {
/** */
}
}

return error.response.statusText;
}

return error.message;
}
Loading

0 comments on commit 4035d47

Please sign in to comment.