Unrecognized value. Skipped inserting

[bobwatcherx]

i create simple dummy app from graphql query
and show data to loop using For , but not work
i check console data is show but error this:
Unrecognized value. Skipped inserting
and why JSON.stringify not work in HTML Code

can help me , thanks :)

import { GraphQLClient, gql } from 'graphql-request'
import {createEffect,createSignal,For} from 'solid-js'
const endpoint = 'https://graphqlzero.almansi.me/api'
const graphQLClient = new GraphQLClient(endpoint)

export default function App(){

  const [post,setPost] = createSignal([])
  const query = gql`
      {
        albums{
      data{
        id
        title
      }
        }
      }
  `
  
  createEffect(async()=>{
         const data = await graphQLClient.request(query)
         const result = await data.albums.data
          result.forEach((p)=>{
          setPost({mid:p.id,mtitle:p.title})
   })
  },[post])

  console.log("adata" + JSON.stringify(post))
  return (
    <div>
    get data from GRAPHQL 
    {post}
    <For each={post}>
    {(p,i)=><li>{p.mid}</li>}
    </For>

    </div>
  )
}

[lxsmnsyc]

result.forEach((p)=>{
  setPost({mid:p.id,mtitle:p.title})
})

This is your issue. The solutions:

const posts = [];
result.forEach((p)=>{
  posts.push({mid:p.id,mtitle:p.title})
})
setPost(posts);

or

setPost(result.map((p) => ({mid:p.id,mtitle:p.title})));

[milahu]

i get the same error with

function App() {
  return <div>{async () => await (await fetch(window.location)).text()}</div>
}

Unrecognized value. Skipped inserting Promise {}

fix:

import { createEffect, createSignal } from "solid-js"

function App() {
  const [value, setValue] = createSignal("")
  createEffect(async () => {
    setValue(await (await fetch(window.location)).text())
  })
  return <div>{value}</div>
}

[linusjf]

I'm trying out your tutorial and I encounter the above message with error_boundary.

import  { ErrorBoundary } from "solid-js";
  
  const Broken = (props: any) => {
   throw new Error("Oh No");
   return <>Never getting here</>;
 };
 
  function ErrorMessage () {
   return <ErrorBoundary fallback={err => <p>
 <Broken />
 </ErrorBoundary>
 }
 
 export default ErrorMessage;

I insert the above component into App.tsx and it fails to insert the error with the message "Unrecognized value.".

Any suggestions?

[linusjf]

There doesn't seem to be a problem using the exact example where ErrorBoundary is returned by App. It's when it's wrapped in another component and inserted into App that the above error occurs. I'm new to SolidJS as the post above suggests.

[linusjf]

For some reason, it seems to be working now ..

You can check out the example at

https://github.com/linusjf/LearnSolidJS/tree/main/FirstApp