Sync solid/basic and solid/basic-graphql-request

examples/solid/basic-graphql-request/src/index.tsx

@@ -1,19 +1,25 @@
 /* @refresh reload */
 import {
-  createQuery,
   QueryClient,
   QueryClientProvider,
+  createQuery,
 } from '@tanstack/solid-query'
 import { SolidQueryDevtools } from '@tanstack/solid-query-devtools'
-import type { Accessor, Setter } from 'solid-js'
-import { createSignal, For, Match, Switch } from 'solid-js'
+import { For, Match, Switch, createSignal } from 'solid-js'
 import { render } from 'solid-js/web'
-import { request, gql } from 'graphql-request'
+import { gql, request } from 'graphql-request'
+import type { Accessor, Setter } from 'solid-js'
 
 const endpoint = 'https://graphqlzero.almansi.me/api'
 
 const queryClient = new QueryClient()
 
+type Post = {
+  id: number
+  title: string
+  body: string
+}
+
 function App() {
   const [postId, setPostId] = createSignal(-1)
 
@@ -45,7 +51,7 @@ function createPosts() {
     queryFn: async () => {
       const {
         posts: { data },
-      } = await request<any>(
+      } = await request<{ posts: { data: Array<Post> } }>(
         endpoint,
         gql`
           query {
@@ -113,12 +119,12 @@ function Posts(props: { setPostId: Setter<number> }) {
 function createPost(postId: Accessor<number>) {
   return createQuery(() => ({
     queryKey: ['post', postId()],
-    queryFn: async (context) => {
-      const { post } = await request<any>(
+    queryFn: async () => {
+      const { post } = await request<{ post: Post }>(
         endpoint,
         gql`
         query {
-          post(id: ${context.queryKey[1]}) {
+          post(id: ${postId()}) {
             id
             title
             body
@@ -129,7 +135,7 @@ function createPost(postId: Accessor<number>) {
 
       return post
     },
-    enabled: !!postId,
+    enabled: !!postId(),
   }))
 }
 
@@ -152,9 +158,9 @@ function Post(props: { postId: number; setPostId: Setter<number> }) {
         </Match>
         <Match when={state.data !== undefined}>
           <>
-            <h1>{state.data.title}</h1>
+            <h1>{state.data?.title}</h1>
             <div>
-              <p>{state.data.body}</p>
+              <p>{state.data?.body}</p>
             </div>
             <div>{state.isFetching ? 'Background Updating...' : ' '}</div>
           </>

examples/solid/basic-typescript/package.json → examples/solid/basic/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "@tanstack/query-example-solid-basic-typescript",
+  "name": "@tanstack/query-example-solid-basic",
   "private": true,
   "type": "module",
   "scripts": {

examples/solid/basic-typescript/src/index.tsx → examples/solid/basic/src/index.tsx

@@ -1,13 +1,13 @@
 /* @refresh reload */
 import {
-  createQuery,
   QueryClient,
   QueryClientProvider,
+  createQuery,
 } from '@tanstack/solid-query'
 import { SolidQueryDevtools } from '@tanstack/solid-query-devtools'
-import type { Component, Setter } from 'solid-js'
-import { createSignal, For, Match, Switch } from 'solid-js'
+import { For, Match, Switch, createSignal } from 'solid-js'
 import { render } from 'solid-js/web'
+import type { Component, Setter } from 'solid-js'
 
 const queryClient = new QueryClient({
   defaultOptions: {
@@ -27,13 +27,8 @@ function createPosts() {
   return createQuery(() => ({
     queryKey: ['posts'],
     queryFn: async (): Promise<Array<Post>> => {
-      const response = await fetch(
-        'https://jsonplaceholder.typicode.com/posts',
-        {
-          method: 'GET',
-        },
-      )
-      return response.json()
+      const response = await fetch('https://jsonplaceholder.typicode.com/posts')
+      return await response.json()
     },
   }))
 }
@@ -47,13 +42,13 @@ function Posts(props: { setPostId: Setter<number> }) {
       <div>
         <Switch>
           <Match when={state.status === 'pending'}>Loading...</Match>
-          <Match when={state.error instanceof Error}>
+          <Match when={state.status === 'error'}>
             <span>Error: {(state.error as Error).message}</span>
           </Match>
           <Match when={state.data !== undefined}>
             <>
               <div>
-                <For each={state.data!}>
+                <For each={state.data}>
                   {(post) => (
                     <p>
                       <a
@@ -88,9 +83,6 @@ function Posts(props: { setPostId: Setter<number> }) {
 const getPostById = async (id: number): Promise<Post> => {
   const response = await fetch(
     `https://jsonplaceholder.typicode.com/posts/${id}`,
-    {
-      method: 'GET',
-    },
   )
   return await response.json()
 }
@@ -117,7 +109,7 @@ function Post(props: { postId: number; setPostId: Setter<number> }) {
         <Match when={!props.postId || state.status === 'pending'}>
           Loading...
         </Match>
-        <Match when={state.error instanceof Error}>
+        <Match when={state.status === 'error'}>
           <span>Error: {(state.error as Error).message}</span>
         </Match>
         <Match when={state.data !== undefined}>