Function Post

examples/solid/default-query-function/src/index.tsx:104–137

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

}

function Post(props: { postId: number; setPostId: Setter<number> }) {
  // You can even leave out the queryFn and just go straight into options
  const state = useQuery<any>(() => ({
    queryKey: [`/posts/${props.postId}`],
    enabled: !!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)