0

Im seeking a way to write a function which destructures fetched data. The structure of the data differs from time to time but the structure is knowen by deriving from an graphql query.

Even more context: For an react project im fetching data from an api. The specific data is tailored for each component but the fetch logic is shared within a custom hook. I want to source the destructuring assignments in external logic aswell. If there is a better or common aproach to this it is very welcome maby linked as a comment?

Knowns:

  • datastructure for destructuring assignment
  • data

Question:

Is there a way to store a destructuring assignment in a variable and destructure with it?

Example:

//const data = fetch(query)
//data could also be: {"a":"b", "c":"d", "e":"f"} || {"a":{"b": "c"}} || ect...

I try achieve somthing like this:

const assignment = `{ a, c, d, e }` //would be returned by an function

const destructuring = ((assignment) =>{
    logic(a, c, d, e)
})

destructuring(data)

or like this:

const assignment = `{ a, c, d, e }`

const assignment = data
Moritz Valentin
  • 122
  • 7
  • 3
    What happens after you destructure the object? Are you trying to create variables? How will you access these dynamically named variables in your code? – jeffkmeng Mar 01 '21 at 16:44
  • 3
    I don't think what you're specifically requesting is possible, not without `eval`-rooted code. Have you considered the difficulty you'd have referencing these variables in the rest of the code if you don't even know what they're named or even how many there are? – Patrick Roberts Mar 01 '21 at 16:44
  • I would get their variable names from their corresponding keys from the same graphql query as the fech. The data would be displayed in react components by their actual key names. – Moritz Valentin Mar 01 '21 at 16:53
  • 3
    @MoritzValentin - You can't create variable names at runtime (without, as Patrick said, using `eval`). – T.J. Crowder Mar 01 '21 at 16:57
  • 1
    This feels like an [XY problem](https://meta.stackexchange.com/q/66377). graphql hooks were not designed with the intention of having a one-size-fits-all destructuring assignment, they're meant to solve other problems like signaling asynchronous state of data fetching while rendering a component. They typically expect you as the developer to tailor the destructuring assignment to the particular query that was used. – Patrick Roberts Mar 01 '21 at 17:03
  • I implemented graphql fetching to avoid overfetching but saw (now) the opportunity to create the destructuring part in one central place with this information. This seems not possible and i thank you for your quick replys. For me the question id answered and could get closed - or someone of you could post an answer? – Moritz Valentin Mar 01 '21 at 17:14
  • Does this answer your question? [How to destructure into dynamically named variables in ES6?](https://stackoverflow.com/questions/35939289/how-to-destructure-into-dynamically-named-variables-in-es6) – FZs Mar 02 '21 at 07:46

0 Answers0