Best way to fetch external api with variable & env_variable body data?
Hiya, I'm struggling on this and would love some help from one of my favorite communities ❤️
So I have a contact form that upon submission should send a fetch to an external api with the form data and an api_key that I currently have stored in an env variable.
Currently I have tried different routes using useQuery, fetch, axios, & trpc.
I'm running into problems with each and not sure how to continue.
With trpc I was running into problems with useQuery in it. Since its not a component, I'm not allowed to use hooks right? (I'm still kinda noob to trpc and and useQuery. trying to learn tho <3) The good news is that I was able to actually use the api_key env variable.
If I create a component with the useQuery, I'm running into 2 problems
1. Using the api_key env variable in it. Even tho I tried making it public. It still errors with invalid env variable.
2. Only getting the query to run after the submission as I don't want the query to run without the contact from values.
I feel like I'm probably just taking the wrong approach and any insight would be extremely helpful ❤️
I appreciate you all. This is my first post here but I've been a long time YT lurker.
2 Replies
you can make a request to a next api route, and from the api route, make the external api call
that way you don't expose secrets by making a client side request
I ended up just implementing the query wrong in trpc. I was thinking I needed to use "useQuery" inside trpc which is just incorrect. After setting it up correctly it works like a charm 🙂