mbnoimi commented 1 year ago

May you please upgrade the tutorial to the recent packages versions as so many changes applied in pocketbase since v 0.2.2

Current pocketbase version is 0.8.1

mbnoimi commented 1 year ago

BTW, current tutorial became outdated.

peppelorum commented 1 year ago

Can only agree, but it was like under ten rows that needed some small fixes.

mbnoimi commented 1 year ago

Can only agree, but it was like under ten rows that needed some small fixes.

The tutorial itself basic so ten rows means a lot :)

peppelorum commented 1 year ago

Here is a quick fix, in a bit of a hurry so haven't tested everything, just copied what I saw I fixed in my own project, https://github.com/peppelorum/pocketbase-vue

mbnoimi commented 1 year ago

Here is a quick fix, in a bit of a hurry so haven't tested everything, just copied what I saw I fixed in my own project, https://github.com/peppelorum/pocketbase-vue

Thanks but still doesn't work

Uncaught TypeError: $setup.$pb.AuthStore is undefined
    _sfc_render navbarComponent.vue:42
    renderComponentRoot runtime-core.esm-bundler.js:898
    componentUpdateFn runtime-core.esm-bundler.js:5631
    run reactivity.esm-bundler.js:187
    update runtime-core.esm-bundler.js:5745
    setupRenderEffect runtime-core.esm-bundler.js:5759
    mountComponent runtime-core.esm-bundler.js:5541
    processComponent runtime-core.esm-bundler.js:5499
    patch runtime-core.esm-bundler.js:5101
    mountChildren runtime-core.esm-bundler.js:5285
    mountElement runtime-core.esm-bundler.js:5195
    processElement runtime-core.esm-bundler.js:5178
    patch runtime-core.esm-bundler.js:5098
    componentUpdateFn runtime-core.esm-bundler.js:5638
    run reactivity.esm-bundler.js:187
    update runtime-core.esm-bundler.js:5745
    setupRenderEffect runtime-core.esm-bundler.js:5759
    mountComponent runtime-core.esm-bundler.js:5541
    processComponent runtime-core.esm-bundler.js:5499
    patch runtime-core.esm-bundler.js:5101
    render runtime-core.esm-bundler.js:6260
    mount runtime-core.esm-bundler.js:4456
    mount runtime-dom.esm-bundler.js:1607
    <anonymous> main.ts:12
navbarComponent.vue:42:26

package.json

{
  "name": "pocketbase-vue",
  "version": "0.0.0",
  "scripts": {
    "dev": "vite",
    "build": "run-p type-check build-only",
    "preview": "vite preview --port 4173",
    "build-only": "vite build",
    "type-check": "vue-tsc --noEmit",
    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore"
  },
  "dependencies": {
    "@vueuse/core": "^9.6.0",
    "pinia": "^2.0.27",
    "pocketbase": "^0.8.1",
    "vue": "^3.2.45",
    "vue-router": "^4.1.6"
  },
  "devDependencies": {
    "@rushstack/eslint-patch": "^1.2.0",
    "@tailwindcss/forms": "^0.5.3",
    "@types/node": "^18.11.9",
    "@vitejs/plugin-vue": "^3.2.0",
    "@vue/eslint-config-prettier": "^7.0.0",
    "@vue/eslint-config-typescript": "^11.0.2",
    "@vue/tsconfig": "^0.1.3",
    "autoprefixer": "^10.4.13",
    "eslint": "^8.28.0",
    "eslint-plugin-vue": "^9.8.0",
    "npm-run-all": "^4.1.5",
    "postcss": "^8.4.19",
    "prettier": "^2.8.0",
    "tailwindcss": "^3.2.4",
    "typescript": "~4.9.3",
    "vite": "^3.2.4",
    "vue-tsc": "^1.0.9"
  }
}

mbnoimi commented 1 year ago

I noticed that auth. using email/pass. has been changed. ex.

try {
    // Authenticate the user via email and password
    const userData = await $pb
      ?.collection("users")
      .authWithPassword(email.value, password.value);
    if (userData) {
      userStore.userID = userData.user.id; <---- INVALID
      userStore.username = userData.user.profile?.username; <---- INVALID
      userStore.userProfileID = userData.user.profile?.id!; <---- INVALID
      router.push({ path: "/dashboard" });
    }
  } catch (error) {
    console.log(error);
  }

StefanVDWeide commented 1 year ago

Thanks for the suggestions! I've upgrade tot 0.8.1 and will update the code and the blog post asap!

StefanVDWeide commented 1 year ago

Created a new branch for the 0.8.1 version of pocketbase. There were a few more breaking changes than anticipated but everything seems to be working.

You can test everything here if you want:

https://github.com/StefanVDWeide/pocketbase-vue/tree/update/pocketbase-0.8.0

I will continue the work and update the article itself the following days.

mbnoimi commented 1 year ago

Created a new branch for the 0.8.1 version of pocketbase. There were a few more breaking changes than anticipated but everything seems to be working.

You can test everything here if you want:

https://github.com/StefanVDWeide/pocketbase-vue/tree/update/pocketbase-0.8.0

I will continue the work and update the article itself the following days.

Thanks. I tested the new branch, The linter still throws some errors:

In this line

Forbidden non-null assertion.eslint[@typescript-eslint/no-non-null-assertion](https://typescript-eslint.io/rules/no-non-null-assertion)
Optional chain expressions can return undefined by design - using a non-null assertion is unsafe and wrong.eslint[@typescript-eslint/no-non-null-asserted-optional-chain](https://typescript-eslint.io/rules/no-non-null-asserted-optional-chain)

userStore.userProfileID = userData.record.profile?.id!;

After create a new post I get 400 error:

{
"errorDetails": "Invalid left operand \"user\" - Unrecognized field \"user\"..",
"errorMessage": "Invalid filter parameters."
}

mbnoimi commented 1 year ago

$ npm run build

> pocketbase-vue@0.0.0 build
> run-p type-check build-only

> pocketbase-vue@0.0.0 build-only
> vite build

> pocketbase-vue@0.0.0 type-check
> vue-tsc --noEmit

vite v3.2.4 building for production...
✓ 53 modules transformed.
rendering chunks (4)...src/views/FeedView.vue:19:7 - error TS2322: Type 'Record[]' is not assignable to type 'never[]'.

19       posts.value = list;
         ~~~~~~~~~~~

src/views/DashboardView.vue:25:7 - error TS2322: Type 'Record[]' is not assignable to type 'never[]'.
  Type 'Record' is not assignable to type 'never'.

25       posts.value = list;
         ~~~~~~~~~~~

Found 2 errors in 2 files.

Errors  Files
     1  src/views/FeedView.vue:19
     1  src/views/DashboardView.vue:25
dist/index.html                                                                       0.42 KiB
dist/assets/HomeView.89217e46.js                                                      3.33 KiB / gzip: 1.14 KiB
dist/assets/DashboardView.d313a6c0.js                                                 1.90 KiB / gzip: 0.99 KiB
dist/assets/IndividualPostComponent.vue_vue_type_script_setup_true_lang.c73a5aaa.js   0.48 KiB / gzip: 0.32 KiB
dist/assets/FeedView.2afb23c3.js                                                      0.93 KiB / gzip: 0.54 KiB
dist/assets/index.00591b16.css                                                        11.85 KiB / gzip: 3.13 KiB
dist/assets/index.016f3a21.js                                                         120.05 KiB / gzip: 41.95 KiB
ERROR: "type-check" exited with 2.

StefanVDWeide commented 1 year ago

I've gone ahead and resolve the type errors you are seeing by (for now) setting them to any. I've pushed my changes to the branch.

Also, in the users collection please remove the API rules for the List/Search Action for now. I will update my blog post to reflect the best API rules settings asap.

Finally, to solve your 400 error, make sure to create auser field on the posts table. This field will link a specific post to a specific user. Make sure it looks like this:

StefanVDWeide commented 1 year ago

3 has resolved the `0.8.0` upgrade and the article is now up to date too.

Thanks for alerting me!

mbnoimi commented 1 year ago

Thanks @StefanVDWeide it works fine

StefanVDWeide / pocketbase-vue

Upgrade tutorial #1

3 has resolved the `0.8.0` upgrade and the article is now up to date too.

StefanVDWeide / pocketbase-vue

Upgrade tutorial #1

3 has resolved the 0.8.0 upgrade and the article is now up to date too.

3 has resolved the `0.8.0` upgrade and the article is now up to date too.