How to destructure properly?

Hey community!

I'm brand new to SolidJS so I apologize if this is a basic question. I'm trying to find a way to destructure props the SolidJS way. I've tried this a couple of different ways, and I seem to run into problems. My issue stems from a request that returns a bunch of nested data (GraphQL), and I'd like to break that data up into pieces.

I'd like to change data that looks like this:

data()?.user?.repositoriesContributedTo.nodes

data()?.user?.repositoriesContributedTo.nodes

data()?.user?.repositoriesContributedTo.nodes

data()?.user?.repositoriesContributedTo.nodes

import { destructure } from '@solid-primitives/destructure'

const FC = () => {
  const [data] = newQuery<UserReposQuery>(UserQuery, variables); // This has reactivity, and is a response to a request.
  const { user: { name, company, repositoriesContributedTo  } } = destructure(data, { deep: true }) // I believe using this library maintains reactivity? 
  
  return (
    <div>
      <p>{company()}</p>
      <p>{name()}</p>
    </div>
  )
}

import { destructure } from '@solid-primitives/destructure'

const FC = () => {
  const [data] = newQuery<UserReposQuery>(UserQuery, variables); // This has reactivity, and is a response to a request.
  const { user: { name, company, repositoriesContributedTo  } } = destructure(data, { deep: true }) // I believe using this library maintains reactivity? 
  
  return (
    <div>
      <p>{company()}</p>
      <p>{name()}</p>
    </div>
  )
}

import { destructure } from '@solid-primitives/destructure'

const FC = () => {
  const [data] = newQuery<UserReposQuery>(UserQuery, variables); // This has reactivity, and is a response to a request.
  const { user: { name, company, repositoriesContributedTo  } } = destructure(data, { deep: true }) // I believe using this library maintains reactivity? 
  
  return (
    <div>
      <p>{company()}</p>
      <p>{name()}</p>
    </div>
  )
}

import { destructure } from '@solid-primitives/destructure'

const FC = () => {
  const [data] = newQuery<UserReposQuery>(UserQuery, variables); // This has reactivity, and is a response to a request.
  const { user: { name, company, repositoriesContributedTo  } } = destructure(data, { deep: true }) // I believe using this library maintains reactivity? 
  
  return (
    <div>
      <p>{company()}</p>
      <p>{name()}</p>
    </div>
  )
}

How to destructure properly?

Similar Threads

Similar Threads

Similar Threads