Function Posts

examples/solid/default-query-function/src/index.tsx:56–102

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

}

function Posts(props: { setPostId: Setter<number> }) {
  // All you have to do now is pass a key!
  const state = useQuery<any[]>(() => ({ queryKey: ['/posts'] }))

  return (
    <div>
      <h1>Posts</h1>
      <div>
        <Switch>
          <Match when={state.status === 'pending'}>Loading...</Match>
          <Match when={state.status === 'error'}>
            <span>Error: {(state.error as Error).message}</span>
          </Match>
          <Match when={state.data !== undefined}>
            <>
              <div>
                <For each={state.data}>
                  {(post) => (
                    <p>
                      <a
                        onClick={() => props.setPostId(post.id)}
                        href="#"
                        style={
                          // We can use the queryCache here to show bold links for
                          // ones that are cached
                          queryClient.getQueryData(['post', post.id])
                            ? {
                                'font-weight': 'bold',
                                color: 'green',
                              }
                            : {}
                        }
                      >
                        {post.title}
                      </a>
                    </p>
                  )}
                </For>
              </div>
              <div>{state.isFetching ? 'Background Updating...' : ' '}</div>
            </>
          </Match>
        </Switch>
      </div>
    </div>
  )
}

function Post(props: { postId: number; setPostId: Setter<number> }) {
  // You can even leave out the queryFn and just go straight into options