Fetching API data from user-side.

Developer Support
1

Hello plasmic!
I’m working on a feature of our project where we need to fill in and display within an input and a text some data that gets fetched from an api… Now what I’ve done is adding an HTTP integration, and doing the call as a Data Query on the page, then reading that dataq from a state variable. this works fine BUT there is a twist on this. This data I need is about geolocation, and this api I’m calling will read the IP from the headers… the issue is that the HTTP request is sent from the server, meaning the IP that reaches the external service is the service one and not the user one… what are the workarounds for this? Is there a way to tell plasmic to make that call from the client side? Do I need to call it from a code componente? if so, how would I register a global state from the code so that info can now live anywhere?
Thanks

2

and related to that, if I would want to, how would I set a page level state from within a code component? so its acceessible from other ones

3

I’m thinking, I def need this second approach, because at the end what I’m looking for is to read something from localStorage, if that is not defined then send a request to a service get the response save it to localstorate and make that available for any component (built in or code one) … So I’m trying to figure out whats the proper way to do this… I’m tryng an Attachment code component but how would I make the data available to any other componente within the page?

4

@productive_duck This is something we are working on (allowing you to force an HTTP query to always be run client side), but as a temporary workaround, you can

  1. Create a code components that is just for rendering its children client side. It normally returns no, except there’s a use effect that makes it return children.
  2. insert a HTTP API Fetcher component inside of this.( Note that this is a code component which does a fetch directly, and this is different from the Fetcher component which uses a server side query)
    Let me know if that works
5

Ok, I’ve created a code component that takes care of the service fetch, (also uses localstorage to save data to avoid refetching). the code component is an attachment. Now I’m trying to save this as a state on the page, so I’m exposing an onchange prop (want this state to be readonly so it shouldn’t be change by its parent) The issue I’m seem to be having is that seems that onGeolocationChange changes on every render, and since I’m running alla the code in useEffect and that onGeolocationChange is in the dep array, it breaks cause its called and called all the time:

This is the config on my codecomponent

name: "Geo Localization",
  isAttachment: true,
  styleSections: false,
  props: {
    children: "slot",
    onGeolocationChange: {
      type: "eventHandler",
      argTypes: [{ name: "geolocationData", type: "object" }],
    },
  },
  states: {
    geolocation: {
      // This state cannot be controlled by the parent -- so can only be read
      type: "readonly",
      variableType: "object",

      // Only need to specify an onChangeProp, not a valueProp
      onChangeProp: "onGeolocationChange",
    },
  },

image.png
image.png750×320 29.1 KB

6

You can make sure your useEffect runs only once by passing in [] as the dependency array second argument, otherwise it’s going to trigger on every re-render which is rarely what you want