Function Post

examples/solid/basic-graphql-request/src/index.tsx:142–171

(props: { postId: number; setPostId: Setter<number> })

}

function Post(props: { postId: number; setPostId: Setter<number> }) {
  const state = createPost(() => props.postId)

  return (
    <div>
      <div>
        <a onClick={() => props.setPostId(-1)} href="#">
          Back
        </a>
      </div>
      <Switch>
        <Match when={!props.postId || state.status === 'pending'}>
          Loading...
        </Match>
        <Match when={state.status === 'error'}>
          <span>Error: {(state.error as Error).message}</span>
        </Match>
        <Match when={state.data !== undefined}>
          <>
            <h1>{state.data?.title}</h1>
            <div>
              <p>{state.data?.body}</p>
            </div>
            <div>{state.isFetching ? 'Background Updating...' : ' '}</div>
          </>
        </Match>
      </Switch>
    </div>
  )
}

render(() => <App />, document.getElementById('root') as HTMLElement)