Need help datasource

[wolfayoub2023]

Hi I really like this project the only thing that I would like its data source there it no datasource to select from queries like httprequest...etc how can I add the http?

[ElierHG]

Hello @wolfayoub2023, according to the docs, the developer decided to leave the queries module out since we can use the PocketBase extend with JS features and a TanStack query client instance.

Just access your secret data sources from the PocketBase extended routes, and public data sources from the front end using TanStack Query.

[wolfayoub2023]

Thank you I just notice that do know or have any guide on how to use the PocketBase extend with JS features and a TanStack query client instance?

[pedrozadotdev]

The TanStack Query is just a caching utility. You can probably ignore it for now, but if you need it in the future, you have it at your disposal... By the way, thanks @ElierHG for helping the community 😄.

[ElierHG]

The TanStack Query is just a caching utility. You can probably ignore it for now, but if you need it in the future, you have it at your disposal... By the way, thanks @ElierHG for helping the community 😄.

Glad to be part of this project and emerging community. 😊

[pedrozadotdev]

You can use the pocketbase sdk to make a request to a custom endpoint in your pocketbase instance:

//Use this in a JS Query
window.pb.send('/custom-pocketbase-route-path/some-path-param', fetchOptions = {})

//pb_hooks/main.pb.js
routerAdd("GET", "custom-pocketbase-route-path/:pathParamName", (c) => {
    let name = c.pathParam("pathParamName")

  const res = $http.send({
      url:     `http://some-external-endpoint.com/${name}`,
      method:  "GET",
      body:    "", // ex. JSON.stringify({"test": 123}) or new FormData()
      headers: {}, // ex. {"content-type": "application/json"}
      timeout: 120, // in seconds
  })

    return c.json(200, res.json)
}, /* optional middlewares */)

If you need more explanation, you can read this and this.

[wolfayoub2023]

Thank you i did it and I make it like an Api wrapper :
`
// pb_hooks/apiProxy.pb.js

routerAdd("POST", "/api/proxy", async (e) => {
try {
// Get the parsed request data using the helper.
const requestData = $apis.requestInfo(e).data;
const { url, method, headers, body } = requestData;

if (!url) {
  return e.json(400, { error: "Missing required 'url' parameter" });
}

// Convert body to JSON if it's an object.
const requestBody = body && typeof body === "object" ? JSON.stringify(body) : body;

// Make the external API call using $http.send.
const response = $http.send({
  url,
  method: method || "GET",
  headers: headers || {},
  body: requestBody,
});

// Return only the external API's JSON (or raw) response.
if (response.json) {
  return e.json(response.statusCode, response.json);
} else {
  return e.json(response.statusCode, { raw: response.raw });
}

} catch (error) {
console.error("Error in API proxy endpoint:", error);
return e.json(500, { error: error.toString() });
}
});
`

[pedrozadotdev]

Great. I'm glad you were able to solve the issue.

[wolfayoub2023]

Thank you very much I have another question it's there any way to get screen info so I can make some component responsive?

[pedrozadotdev]

You can use custom css and target the element you want to change based on media queries.