Wasp•2w ago

Custom API issue

Trying to implement a custom API, but I'm getting a html as response and the logs are not print in the console. In main.wasp: api getChart { fn: import { getChart } from "@src/server/api/charts", httpRoute: (GET, "/api/charts"), //entities: [Chart], // auth: true } In charts.ts: import { GetChart } from "wasp/server/api"; export const getChart: GetChart = (req, res) => { console.log("getChart"); console.log("Request params:", req.params); };

23 Replies

kapa.ai•2w ago

Hi @Jorge. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Based on the information provided in the knowledge sources, it seems there might be a few issues with your custom API implementation. Let's address them: 1. API Implementation: Your API implementation in charts.ts is not sending any response. This could be why you're getting an HTML response (likely a default error page). You should send a response using res.json() or res.send(). Here's how you could modify your code:

import { GetChart } from "wasp/server/api";

export const getChart: GetChart = (req, res) => {
  console.log("getChart");
  console.log("Request params:", req.params);
  res.json({ message: "Chart data" }); // Send a JSON response
};

import { GetChart } from "wasp/server/api";

export const getChart: GetChart = (req, res) => {
  console.log("getChart");
  console.log("Request params:", req.params);
  res.json({ message: "Chart data" }); // Send a JSON response
};

2. Console Logs: The console logs you've added might not appear in the browser console. They will be printed in the server-side console where your Wasp app is running. Check your terminal or server logs to see these messages. 3. API Declaration: Your API declaration in main.wasp looks correct. However, make sure that the import path in the fn field is correct and points to the right file. 4. Using the API: To use this API from the client side, you should use the Axios wrapper provided by Wasp. Here's an example of how you could call your API from a React component:

import React, { useEffect } from "react";
import { api } from "wasp/client/api";

export const ChartComponent = () => {
  useEffect(() => {
    const fetchChart = async () => {
      try {
        const response = await api.get("/api/charts");
        console.log(response.data);
      } catch (error) {
        console.error("Error fetching chart:", error);
      }
    };
    fetchChart();
  }, []);

  return <div>Chart Component</div>;
};

import React, { useEffect } from "react";
import { api } from "wasp/client/api";

export const ChartComponent = () => {
  useEffect(() => {
    const fetchChart = async () => {
      try {
        const response = await api.get("/api/charts");
        console.log(response.data);
      } catch (error) {
        console.error("Error fetching chart:", error);
      }
    };
    fetchChart();
  }, []);

  return <div>Chart Component</div>;
};

If you're still experiencing issues after making these changes, it would be helpful to check the server logs for any error messages and to use browser developer tools to inspect the network request and response. For more detailed information on creating and using custom API routes in Wasp, you can refer to the Custom HTTP API Endpoints documentation (https://wasp-lang.dev/docs/advanced/apis). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @Jorge, I seem to be having a bit of trouble. Don't worry though, I've pinged my support and they will try to fix me up! :technologist: Perhaps try again in 15mins?

JorgeOP•2w ago

@kapa.ai src git:(develop) ✗ curl -X GET http://localhost:3000/api/charts <!DOCTYPE html> <html lang="en"> <head> <script type="module"> import RefreshRuntime from "/@react-refresh" RefreshRuntime.injectIntoGlobalHook(window) window.$RefreshReg$ = () => {} window.$RefreshSig$ = () => (type) => type window.vite_plugin_react_preamble_installed = true </script> <script type="module" src="/@vite/client"></script> <meta charset="utf-8" /> <link rel="shortcut icon" href="/favicon.ico" /> <meta name="viewport" content="minimum-scale=1, initial-scale=1, width=device-width, shrink-to-fit=no" /> <meta name="theme-color" content="#000000" /> <link rel="manifest" href="/manifest.json" /> <meta property='og:type' content='website' /> <meta property='og:title' content='Test App' /> <meta property='og:url' content='https://testapp.com' /> <meta property='og:description' content='Test app' /> <script async src='https://www.googletagmanager.com/gtag/js?id=G-XXXXXX'></script> <script>window.dataLayer = window.dataLayer || [];function gtag(){dataLayer.push(arguments);}gtag('js', new Date());gtag('config', 'G-XXXXXX');</script> <title>Test app</title> </head> <body> <noscript>You need to enable JavaScript to run this app.</noscript> <div id="root"></div> <script type="module" src="/src/index.tsx?t=1733784893322"></script> </body> </html>

kapa.ai•2w ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- Based on the response you're receiving, it appears that your custom API route is not being correctly handled. Instead of getting the expected JSON response from your API, you're receiving the HTML content of your app's main page. This suggests that the request is not reaching your custom API handler. The most likely reason for this issue is that you're trying to access the API on the wrong port. According to the Wasp documentation (https://discord.com/channels/686873244791210014/1223328118278983680), Wasp spins up two processes: 1. One serving the client files (on port 3000) 2. Another serving the server files (on port 3001) Your custom API routes are part of the server, so they should be accessible on port 3001, not 3000. To fix this, you should change your curl command to:

curl -X GET <http://localhost:3001/api/charts>

curl -X GET <http://localhost:3001/api/charts>

This should allow you to reach your custom API endpoint and receive the expected response. If you're still encountering issues after making this change, you might want to double-check your API implementation and make sure it's sending a response, as mentioned in the previous answer. Also, ensure that your server is running and that there are no error messages in the server console. For more information on custom API routes in Wasp, you can refer to the Custom HTTP API Endpoints documentation (https://wasp-lang.dev/docs/advanced/apis#defining-the-apis-nodejs-implementation). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @Jorge, I seem to be having a bit of trouble. Don't worry though, I've pinged my support and they will try to fix me up! :technologist: Perhaps try again in 15mins?

JorgeOP•2w ago

OMFG it was a port issue, was using 3000 instead 3001 😅 thanks for your help man/bot! @kapa.ai using post I'm getting: failed to load resource origin is not allowed by access-control-allow-origin

kapa.ai•2w ago

Let me check the knowledge base for you again. One moment! :books:

MEE6•2w ago

Wohooo @Jorge, you just became a Waspeteer level 4!

kapa.ai•2w ago

---------------------- It seems you're encountering a Cross-Origin Resource Sharing (CORS) issue when trying to make a POST request to your custom API endpoint. This is a common problem when the client and server are running on different origins (in this case, likely different ports). To resolve this issue, you need to properly configure CORS for your Wasp application. Here are a few steps you can take: 1. First, make sure you're using the correct URL for your API requests. As mentioned earlier, the server typically runs on port 3001, so your API requests should be directed to <http://localhost:3001/api/....> 2. Wasp provides a way to configure CORS for your APIs. You can use the apiNamespace feature to apply CORS middleware to all APIs under a specific path. Here's how you can do it: In your main.wasp file, add the following:

   apiNamespace myApi {
     middlewareConfigFn: import { apiMiddleware } from "@src/apis",
     path: "/api"
   }

   apiNamespace myApi {
     middlewareConfigFn: import { apiMiddleware } from "@src/apis",
     path: "/api"
   }

Then, in your src/apis.js or src/apis.ts file:

   import cors from 'cors'

   export const apiMiddleware = (middlewareConfig) => {
     middlewareConfig.set('cors', cors({ origin: '<http://localhost:3000'> }))
     return middlewareConfig
   }

   import cors from 'cors'

   export const apiMiddleware = (middlewareConfig) => {
     middlewareConfig.set('cors', cors({ origin: '<http://localhost:3000'> }))
     return middlewareConfig
   }

This will allow CORS for requests coming from your client application (assuming it's running on port 3000). 3. If you're using the api object from Wasp on the client side, make sure you've set up the REACT_APP_API_URL in your .env.client file:

   REACT_APP_API_URL=<http://localhost:3001>

   REACT_APP_API_URL=<http://localhost:3001>

This ensures that the api object knows where to send the requests. 4. If you're still having issues, you might need to configure CORS globally for your server. You can do this by modifying the server middleware configuration in your main.wasp file:

   app myApp {
     // ...
     server: {
       middlewareConfigFn: import { serverMiddlewareFn } from "@src/serverSetup"
     },
   }

   app myApp {
     // ...
     server: {
       middlewareConfigFn: import { serverMiddlewareFn } from "@src/serverSetup"
     },
   }

And then in your src/serverSetup.js or src/serverSetup.ts:

   import cors from 'cors'
   import { config } from 'wasp/server'

   export const serverMiddlewareFn = (middlewareConfig) => {
     middlewareConfig.set('cors', cors({ origin: config.frontendUrl }))
     return middlewareConfig
   }

   import cors from 'cors'
   import { config } from 'wasp/server'

   export const serverMiddlewareFn = (middlewareConfig) => {
     middlewareConfig.set('cors', cors({ origin: config.frontendUrl }))
     return middlewareConfig
   }

These steps should help resolve your CORS issue. Remember to restart your Wasp application after making these changes. For more detailed information on configuring CORS and middleware in Wasp, you can refer to the Configuring Middleware documentation (https://wasp-lang.dev/docs/advanced/middleware-config) and the Making Sure CORS Works section (https://wasp-lang.dev/docs/advanced/apis#making-sure-cors-works) in the Wasp documentation. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @Jorge, I seem to be having a bit of trouble. Don't worry though, I've pinged my support and they will try to fix me up! :technologist: Perhaps try again in 15mins?

JorgeOP•2w ago

@kapa.ai In this example how to add e.g another parameter "address" ? api fooBar { fn: import { fooBar } from "@src/apis", entities: [Task], httpRoute: (GET, "/foo/bar/:email") }

kapa.ai•2w ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- To add another parameter like "address" to your custom API route in Wasp, you can simply include it in the httpRoute path. Here's how you can modify your example to include both "email" and "address" parameters:

api fooBar {
  fn: import { fooBar } from "@src/apis",
  entities: [Task],
  httpRoute: (GET, "/foo/bar/:email/:address")
}

api fooBar {
  fn: import { fooBar } from "@src/apis",
  entities: [Task],
  httpRoute: (GET, "/foo/bar/:email/:address")
}

In this modified version, the API route now expects both an email and an address parameter in the URL path. When implementing the API function in your @src/apis file, you can access these parameters through the req.params object. Here's an example of how your implementation might look:

import { FooBar } from "wasp/server/api";

export const fooBar: FooBar = (req, res, context) => {
  const { email, address } = req.params;
  console.log("Email:", email);
  console.log("Address:", address);
  
  // Your logic here...
  
  res.json({ message: "Received parameters", email, address });
};

import { FooBar } from "wasp/server/api";

export const fooBar: FooBar = (req, res, context) => {
  const { email, address } = req.params;
  console.log("Email:", email);
  console.log("Address:", address);
  
  // Your logic here...
  
  res.json({ message: "Received parameters", email, address });
};

This approach allows you to define multiple parameters in your custom API route and access them in your API implementation. For more details on defining and implementing custom API routes in Wasp, you can refer to the Custom HTTP API Endpoints documentation (https://wasp-lang.dev/docs/advanced/apis#defining-the-apis-nodejs-implementation). Remember that when calling this API, you would need to provide both parameters in the URL, like this: /foo/bar/[email protected]/123-main-st. Custom HTTP API Endpoints (https://wasp-lang.dev/docs/advanced/apis) ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @Jorge, I seem to be having a bit of trouble. Don't worry though, I've pinged my support and they will try to fix me up! :technologist: Perhaps try again in 15mins?

JorgeOP•2w ago

@kapa.ai Does it work with an URL like: /foo/[email protected]&address=test

kapa.ai•2w ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- Yes, you can definitely use query parameters in your custom API route in Wasp. To do this, you would need to modify your API declaration and implementation slightly. Here's how you can achieve this: 1. First, update your API declaration in main.wasp:

api fooBar {
  fn: import { fooBar } from "@src/apis",
  entities: [Task],
  httpRoute: (GET, "/foo/bar")
}

api fooBar {
  fn: import { fooBar } from "@src/apis",
  entities: [Task],
  httpRoute: (GET, "/foo/bar")
}

Notice that we've removed the path parameters (:email and :address) from the httpRoute. 2. Then, in your API implementation file (e.g., @src/apis.ts or @src/apis.js), you can access the query parameters using req.query:

import { FooBar } from "wasp/server/api";

export const fooBar: FooBar = (req, res, context) => {
  const { email, address } = req.query;
  console.log("Email:", email);
  console.log("Address:", address);
  
  // Your logic here...
  
  res.json({ message: "Received parameters", email, address });
};

import { FooBar } from "wasp/server/api";

export const fooBar: FooBar = (req, res, context) => {
  const { email, address } = req.query;
  console.log("Email:", email);
  console.log("Address:", address);
  
  // Your logic here...
  
  res.json({ message: "Received parameters", email, address });
};

With this setup, you can now call your API using the URL format you specified:

/foo/[email protected]&address=test

/foo/[email protected]&address=test

This approach allows for more flexibility in how parameters are passed to your API, as query parameters are optional and can be easily added or omitted as needed. For more information on handling request parameters in custom API routes, you can refer to the Custom HTTP API Endpoints documentation (https://wasp-lang.dev/docs/advanced/apis#defining-the-apis-nodejs-implementation). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @Jorge, I seem to be having a bit of trouble. Don't worry though, I've pinged my support and they will try to fix me up! :technologist: Perhaps try again in 15mins?

JorgeOP•2w ago

@kapa.ai are you sure about: api fooBar { fn: import { fooBar } from "@src/apis", entities: [Task], httpRoute: (GET, "/foo/bar/:email/:address") }

kapa.ai•2w ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- I apologize for the confusion in my previous response. You're right to question this, and I appreciate your attention to detail. Let me provide a more accurate answer based on the Wasp documentation. According to the API Reference for Custom HTTP API Endpoints (https://wasp-lang.dev/docs/advanced/apis#api-reference), the correct syntax for defining an API with route parameters in Wasp is slightly different. Here's the correct way to define the API with route parameters:

api fooBar {
  fn: import { fooBar } from "@src/apis",
  entities: [Task],
  httpRoute: (GET, "/foo/bar/:email/:address")
}

api fooBar {
  fn: import { fooBar } from "@src/apis",
  entities: [Task],
  httpRoute: (GET, "/foo/bar/:email/:address")
}

This syntax is indeed correct. The httpRoute field uses a tuple format with the HTTP method and the path string. The path can include route parameters prefixed with :, as shown in the example. In the API implementation, you would access these parameters through req.params, like this:

import { FooBar } from "wasp/server/api";

export const fooBar: FooBar = (req, res, context) => {
  const { email, address } = req.params;
  console.log("Email:", email);
  console.log("Address:", address);
  
  // Your logic here...
  
  res.json({ message: "Received parameters", email, address });
};

import { FooBar } from "wasp/server/api";

export const fooBar: FooBar = (req, res, context) => {
  const { email, address } = req.params;
  console.log("Email:", email);
  console.log("Address:", address);
  
  // Your logic here...
  
  res.json({ message: "Received parameters", email, address });
};

Thank you for bringing this to my attention. It's important to provide accurate information, and I appreciate the opportunity to clarify. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @Jorge, I seem to be having a bit of trouble. Don't worry though, I've pinged my support and they will try to fix me up! :technologist: Perhaps try again in 15mins?

JorgeOP•2w ago

@kapa.ai give curl cmd for your example

kapa.ai•2w ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- Based on the API route we discussed earlier, here's the curl command you can use to test the API:

curl -X GET "<http://localhost:3001/foo/bar/[email protected]/123-main-st">

curl -X GET "<http://localhost:3001/foo/bar/[email protected]/123-main-st">

This curl command: 1. Uses the GET method (-X GET) 2. Targets the server running on port 3001, which is typically where Wasp runs the server-side code Discord support thread (https://discord.com/channels/686873244791210014/1217484119173501088) 3. Includes the route parameters :email and :address as part of the URL path Remember to replace [email protected] and 123-main-st with the actual email and address you want to test with. If you're running this command from a different machine or if you've configured your Wasp app to run on a different port, you'll need to adjust the hostname and port accordingly. Also, make sure your Wasp server is running before executing this curl command. If you encounter any CORS issues (which shouldn't happen with a curl command, but might if you're testing from a browser), you may need to configure CORS as discussed in our previous interactions. Custom HTTP API Endpoints (https://wasp-lang.dev/docs/advanced/apis#defining-the-apis-nodejs-implementation) ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @Jorge, I seem to be having a bit of trouble. Don't worry though, I've pinged my support and they will try to fix me up! :technologist: Perhaps try again in 15mins?

JorgeOP•2w ago

ok it works after app restart, thanks @kapa.ai how to rather use this notation: curl -X GET http://localhost:3001/foo/[email protected]&address=123-main-st

kapa.ai•2w ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- To use query parameters in your API route as shown in your curl command, you'll need to modify both the API declaration in your Wasp file and the API implementation. Here's how you can do it: 1. First, update your API declaration in main.wasp:

api fooBar {
  fn: import { fooBar } from "@src/apis",
  entities: [Task],
  httpRoute: (GET, "/foo/bar")
}

api fooBar {
  fn: import { fooBar } from "@src/apis",
  entities: [Task],
  httpRoute: (GET, "/foo/bar")
}

Notice that we've removed the path parameters (:email and :address) from the httpRoute. 2. Then, in your API implementation file (e.g., @src/apis.ts or @src/apis.js), you'll need to access the query parameters using req.query:

import { FooBar } from "wasp/server/api";

export const fooBar: FooBar = (req, res, context) => {
  const { email, address } = req.query;
  console.log("Email:", email);
  console.log("Address:", address);
  
  // Your logic here...
  
  res.json({ message: "Received parameters", email, address });
};

import { FooBar } from "wasp/server/api";

export const fooBar: FooBar = (req, res, context) => {
  const { email, address } = req.query;
  console.log("Email:", email);
  console.log("Address:", address);
  
  // Your logic here...
  
  res.json({ message: "Received parameters", email, address });
};

With these changes, you can now use the curl command exactly as you specified:

curl -X GET "<http://localhost:3001/foo/[email protected]&address=123-main-st">

curl -X GET "<http://localhost:3001/foo/[email protected]&address=123-main-st">

This approach allows you to pass parameters as query strings, which can be more flexible in some cases, especially when dealing with optional parameters. Remember to ensure your Wasp server is running on port 3001 before executing this curl command. If you've configured your server to run on a different port, adjust the command accordingly. For more details on handling request parameters in custom API routes, you can refer to the Custom HTTP API Endpoints documentation (https://wasp-lang.dev/docs/advanced/apis#defining-the-apis-nodejs-implementation). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @Jorge, I seem to be having a bit of trouble. Don't worry though, I've pinged my support and they will try to fix me up! :technologist: Perhaps try again in 15mins?

JorgeOP•2w ago

correct thanks @kapa.ai is this the right way to check user ? if (!context.user) { throw new HttpError(401); }

kapa.ai•2w ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- Yes, that is the correct way to check if a user is authenticated in Wasp. This pattern is commonly used in Wasp operations (queries and actions) to ensure that only authenticated users can access certain functionality. Here's a breakdown of what this code does: 1. It checks if context.user exists. In Wasp, when a user is authenticated, their information is automatically added to the context object. 2. If context.user is falsy (null or undefined), it means the user is not authenticated. 3. In that case, it throws an HttpError with a status code of 401, which stands for "Unauthorized". This pattern is demonstrated in several places in the Wasp documentation: 1. In the Tutorial section (https://wasp-lang.dev/docs/tutorial/auth#updating-operations-to-check-authentication), where it's used in both queries and actions:

export const getTasks = async (args, context) => {  
  if (!context.user) {  
    throw new HttpError(401)  
  }  
  // ... rest of the function
}

export const getTasks = async (args, context) => {  
  if (!context.user) {  
    throw new HttpError(401)  
  }  
  // ... rest of the function
}

2. In the Auth Overview (https://wasp-lang.dev/docs/auth/overview#using-the-contextuser-object), where it's used in an action:

export const createTask = async (task, context) => {  
  if (!context.user) {  
    throw new HttpError(403)  
  }
  // ... rest of the function
}

export const createTask = async (task, context) => {  
  if (!context.user) {  
    throw new HttpError(403)  
  }
  // ... rest of the function
}

Note that in some older examples, you might see 403 used instead of 401. However, 401 is more semantically correct for this use case, as it specifically means "Unauthorized" (i.e., the user needs to authenticate), while 403 means "Forbidden" (i.e., the user is authenticated but doesn't have the right permissions). The Wasp team has been moving towards using 401 consistently for this case (https://github.com/wasp-lang/wasp/issues/648). So, to answer your question directly: Yes, this is the right way to check if a user is authenticated in Wasp operations, and it's a recommended practice for securing your app's backend functionality. Tutorial: Updating Operations to Check Authentication (https://wasp-lang.dev/docs/tutorial/auth#updating-operations-to-check-authentication) Auth Overview: Using the context.user object (https://wasp-lang.dev/docs/auth/overview#using-the-contextuser-object) ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @Jorge, I seem to be having a bit of trouble. Don't worry though, I've pinged my support and they will try to fix me up! :technologist: Perhaps try again in 15mins?

JorgeOP•2w ago

@kapa.ai how to retrieve data send in a form inside API ?

kapa.ai•2w ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- To retrieve data sent in a form inside a Wasp API, you need to access the request body. The exact method depends on how the data is being sent from the client. Here are a few common scenarios: 1. For JSON data: If the form data is being sent as JSON (which is common in modern web applications), you can access it through req.body. Here's an example:

import { YourApi } from "wasp/server/api";

export const yourApi: YourApi = (req, res, context) => {
  const { field1, field2 } = req.body;
  console.log("Field 1:", field1);
  console.log("Field 2:", field2);
  
  // Your logic here...
  
  res.json({ message: "Data received", field1, field2 });
};

import { YourApi } from "wasp/server/api";

export const yourApi: YourApi = (req, res, context) => {
  const { field1, field2 } = req.body;
  console.log("Field 1:", field1);
  console.log("Field 2:", field2);
  
  // Your logic here...
  
  res.json({ message: "Data received", field1, field2 });
};

2. For form-data: If you're sending form data (e.g., when uploading files), you'll need to use a middleware like multer to parse the form data. Here's how you can set it up: First, add multer to your dependencies in main.wasp:

dependencies {
  server: [
    "multer@^1.4.5-lts.1"
  ]
}

dependencies {
  server: [
    "multer@^1.4.5-lts.1"
  ]
}

Then, in your API implementation:

import multer from 'multer';
import { YourApi } from "wasp/server/api";

const upload = multer();

export const yourApi: YourApi = (req, res, context) => {
  upload.none()(req, res, (err) => {
    if (err) {
      return res.status(500).json({ error: err.message });
    }
    
    const { field1, field2 } = req.body;
    console.log("Field 1:", field1);
    console.log("Field 2:", field2);
    
    // Your logic here...
    
    res.json({ message: "Data received", field1, field2 });
  });
};

import multer from 'multer';
import { YourApi } from "wasp/server/api";

const upload = multer();

export const yourApi: YourApi = (req, res, context) => {
  upload.none()(req, res, (err) => {
    if (err) {
      return res.status(500).json({ error: err.message });
    }
    
    const { field1, field2 } = req.body;
    console.log("Field 1:", field1);
    console.log("Field 2:", field2);
    
    // Your logic here...
    
    res.json({ message: "Data received", field1, field2 });
  });
};

3. For URL-encoded form data: If the form is submitted with application/x-www-form-urlencoded content type, Express (which Wasp uses under the hood) should automatically parse it, and you can access it through req.body just like with JSON data. Remember to set the appropriate Content-Type header when sending the form data from the client side. For more details on handling form data and file uploads in Wasp, you can refer to the Github issue discussion on handling FormData (https://github.com/wasp-lang/wasp/issues/1683). Also, make sure to validate and sanitize the input data to prevent security issues. Github Issue: Api can't handle FormData (https://github.com/wasp-lang/wasp/issues/1683) </assistant_answer> ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @Jorge, I seem to be having a bit of trouble. Don't worry though, I've pinged my support and they will try to fix me up! :technologist: Perhaps try again in 15mins?

JorgeOP•2w ago

@kapa.ai the official doc is not saying that: Dependencies In a Wasp project, dependencies are defined in a standard way for JavaScript projects: using the package.json file, located at the root of your project. You can list your dependencies under the dependencies or devDependencies fields. Adding a New Dependency To add a new package, like date-fns (a great date handling library), you use npm: npm install date-fns This command will add the package in the dependencies section of your package.json file. You will notice that there are some other packages in the dependencies section, like react and wasp. These are the packages that Wasp uses internally, and you should not modify or remove them. Using Packages that are Already Used by Wasp Internally In the current version of Wasp, if Wasp is already internally using a certain dependency (e.g. React) with a certain version specified, you are not allowed to define that same npm dependency yourself while specifying a different version. If you do that, you will get an error message telling you which exact version you have to use for that dependency. This means Wasp dictates exact versions of certain packages, so for example you can't choose the version of React you want to use. NOTE We are currently working on a restructuring that will solve this and some other quirks: check issue #734 to follow our progress.

kapa.ai•2w ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- You are correct, and I apologize for any confusion in my previous responses. The information you've provided is indeed from the official Wasp documentation, specifically from the Dependencies page (https://wasp-lang.dev/docs/project/dependencies). Let me summarize the key points from this official documentation: 1. Dependencies in a Wasp project are defined in the standard package.json file at the root of your project, not in the .wasp file as I might have suggested earlier. 2. You can add new dependencies using the normal npm install command, which will update the package.json file. 3. Some packages like react and wasp are used internally by Wasp and should not be modified or removed. 4. If Wasp is already using a certain dependency internally, you cannot specify a different version of that dependency. Wasp will give you an error message specifying which exact version you must use. 5. This means that for some packages, Wasp dictates the exact versions you must use, limiting your ability to choose versions for these packages. 6. The Wasp team is aware of these limitations and is working on a restructuring to address these issues, as mentioned in issue #734 (https://github.com/wasp-lang/wasp/issues/734). Thank you for bringing this to my attention. It's crucial to provide accurate information based on the official documentation. The approach to dependencies in Wasp is indeed different from what I described earlier, and it's important for users to understand these constraints when working with Wasp projects. Dependencies documentation (https://wasp-lang.dev/docs/project/dependencies) ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @Jorge, I seem to be having a bit of trouble. Don't worry though, I've pinged my support and they will try to fix me up! :technologist: Perhaps try again in 15mins?

Gaming

Programming

Custom API issue