sdk not properly encoding url when using sort query params

jackobV commented 10 months ago

I have an issue when fetching data in next js. Using the sdk, I am sending a query const response = await pb.collection("news").getList(page,8,{ sort: 'datum', }) and this does not sort properly. After investigating the issue, when looking at the url that nextjs sends, the sort value is not encoded / the "=" character stays as "=". When changing it to the proper sort%3Ddatum instead of sort=datum The response is succesfully sorted.

I think that the same issue was the cause of https://github.com/pocketbase/pocketbase/issues/1640 but the issue was not resolved. As mentioned in the issue, the sdk should handle the url encoding right?

ganigeorgiev commented 10 months ago

I don't understand what do you mean by 'the "=" character stays as "="'. It should remain = as it is a valid query parameter assignment character.

I'm not able to reproduce it when testing locally and I suspect that your issue is caused by the Next.js cache (see https://nextjs.org/docs/app/building-your-application/caching#opting-out-1).

Note that the Admin UI also uses the SDK and if you can sort from the Admin UI then it is most likely not JS SDK related.

To rule out PocketBase issue, you can also try to reproduce it by sending the request with a plain JS without the Next.JS custom fetch in a static pb_public/index.html file:

<!-- pb_public/index.html -->
<!DOCTYPE html />
<html>
    <head>
        <meta charset="utf-8" />
        <title>Plain JS</title>
    </head>
    <body>
        <script type="module">
            import PocketBase from "https://cdn.jsdelivr.net/gh/pocketbase/js-sdk@0.19.0/dist/pocketbase.es.mjs"

            const pb = new PocketBase("http://127.0.0.1:8090");

            const response = await pb.collection("news").getList(1, 8, { sort: 'datum' })
            console.log(response);
        </script>
    </body>
</html>

Navigate to http://127.0.0.1:8090 and check your browser console whether the output is correct.

If you are still not able to make it work and think that it is a JS SDK issue, please create a minimal reproducible repo and I'll try to have a more detailed look.

ganigeorgiev commented 10 months ago

Side-note: to specify custom fetch option with the request (eg. explicitly disabling the Next.js cache) see the example in https://github.com/pocketbase/js-sdk#custom-request-options.

pocketbase / js-sdk

sdk not properly encoding url when using sort query params #259