SolidJS•2y ago

Get simple fetch data to render

hey guys i feel very stupid asking this question but i cant seem to get this working correctly. i tried multiple things already. The best thing i got yet was my console logging the array but even then i couldnt get anything to render. im using tauri but i dont think that should matter in this context here the problem seem that my getComments in my createResource is never actually ran?

import { createResource } from 'solid-js';
import { invoke } from '@tauri-apps/api/tauri';
import './App.css';

type Comments = {
  postId: number;
  id: number;
  name: string;
  email: string;
  body: string;
};

async function App() {
  const getComments = async () =>
    JSON.parse(await invoke<string>('fetch_comments')) as Comments[];

  const [comments] = createResource(getComments);

  console.log(comments());

  return (
    <div class='container'>
      {JSON.stringify(comments())}
      <h1>Welcome to Tauri!</h1>
    </div>
  );
}

export default App;

import { createResource } from 'solid-js';
import { invoke } from '@tauri-apps/api/tauri';
import './App.css';

type Comments = {
  postId: number;
  id: number;
  name: string;
  email: string;
  body: string;
};

async function App() {
  const getComments = async () =>
    JSON.parse(await invoke<string>('fetch_comments')) as Comments[];

  const [comments] = createResource(getComments);

  console.log(comments());

  return (
    <div class='container'>
      {JSON.stringify(comments())}
      <h1>Welcome to Tauri!</h1>
    </div>
  );
}

export default App;

9 Replies

Silvan•2y ago

while this returns me data perfectly fine

  const data = JSON.parse(await invoke<string>('fetch_comments')) as Comments[];
  console.log(data);

  const data = JSON.parse(await invoke<string>('fetch_comments')) as Comments[];
  console.log(data);

im also getting a computations created outside a `createRoot` or `render` will never be disposed wait can solid components not be async itself? i removed it from the App() and now it renders stuff funny enough my console log only returns undefined now but i can get stuff to render

lxsmnsyc•2y ago

it will always return undefined first, and since you're calling it in the component's top-level scope, it will only evaluate once. Now, I want you to try removing that console.log, and wrap the returned JSX in Suspense

Silvan•2y ago

i got it working without suspense. im just confused that adding async at the top broke it. but from what i can see solid uses lazy/suspense instead but thanks! i do understand the undefined log tho!

lxsmnsyc•2y ago

yeah Solid doesn't have async components yet. It's something we're exploring right now

Alex Lohr•2y ago

asynchronity we usually handle with createResource().

Alex Lohr•2y ago

If you are missing features in createResource, have a look at https://github.com/solidjs-community/solid-primitives/blob/main/packages/resource/README.md

GitHub

solid-primitives/README.md at main · solidjs-community/solid-primit...

A library of high-quality primitives that extend SolidJS reactivity. - solid-primitives/README.md at main · solidjs-community/solid-primitives

Silvan•2y ago

honestly my only problem is that i got no errors or anything. even tho the code was fine and wasn’t relying on the component being async it stopped working so maybe a linting rule or smth to avoid that?

Alex Lohr•2y ago

Since you did not type App as Component, neither the linter nor the type checker could infer that you wanted this to be a component. Otherwise, you would have gotten errors.

Silvan•2y ago

oh gotta blame the tauri template in this case! but good to know

Gaming

Programming

Get simple fetch data to render