fix(examples/solid/{basic,offline}): pass accessors instead of values to query hooks

examples/solid/basic/src/index.tsx

@@ -7,7 +7,7 @@ import {
 import { SolidQueryDevtools } from '@tanstack/solid-query-devtools'
 import { For, Match, Switch, createSignal } from 'solid-js'
 import { render } from 'solid-js/web'
-import type { Component, Setter } from 'solid-js'
+import type { Accessor, Component, Setter } from 'solid-js'
 
 const queryClient = new QueryClient({
   defaultOptions: {
@@ -87,16 +87,16 @@ const getPostById = async (id: number): Promise<Post> => {
   return await response.json()
 }
 
-function createPost(postId: number) {
+function createPost(postId: Accessor<number>) {
   return useQuery(() => ({
-    queryKey: ['post', postId],
-    queryFn: () => getPostById(postId),
-    enabled: !!postId,
+    queryKey: ['post', postId()],
+    queryFn: () => getPostById(postId()),
+    enabled: !!postId(),
   }))
 }
 
 function Post(props: { postId: number; setPostId: Setter<number> }) {
-  const state = createPost(props.postId)
+  const state = createPost(() => props.postId)
 
   return (
     <div>

examples/solid/offline/src/App.tsx

@@ -140,7 +140,7 @@ function List(props: { onSelectMovie: (movieId: string) => void }) {
 
 function Detail(props: { movieId: string; onBack: () => void }) {
   const { comment, setComment, updateMovie, movieQuery } = useMovie(
-    props.movieId,
+    () => props.movieId,
   )
 
   function submitForm(event: SubmitEvent) {

examples/solid/offline/src/movies.ts

@@ -1,6 +1,7 @@
 import { createSignal } from 'solid-js'
 import { useMutation, useQuery, useQueryClient } from '@tanstack/solid-query'
 import * as api from './api'
+import type { Accessor } from 'solid-js'
 
 export const movieKeys = {
   all: () => ['movies'],
@@ -9,28 +10,28 @@ export const movieKeys = {
   detail: (id: string) => [...movieKeys.details(), id],
 }
 
-export const useMovie = (movieId: string) => {
+export const useMovie = (movieId: Accessor<string>) => {
   const queryClient = useQueryClient()
 
   const movieQuery = useQuery(() => ({
-    queryKey: movieKeys.detail(movieId),
-    queryFn: () => api.fetchMovie(movieId),
+    queryKey: movieKeys.detail(movieId()),
+    queryFn: () => api.fetchMovie(movieId()),
   }))
 
   const [comment, setComment] = createSignal<string | undefined>()
 
   const updateMovie = useMutation(() => ({
-    mutationKey: movieKeys.detail(movieId),
+    mutationKey: movieKeys.detail(movieId()),
     onMutate: async () => {
-      await queryClient.cancelQueries({ queryKey: movieKeys.detail(movieId) })
+      await queryClient.cancelQueries({ queryKey: movieKeys.detail(movieId()) })
       const previousData = queryClient.getQueryData<
         Awaited<ReturnType<typeof api.fetchMovie>>
-      >(movieKeys.detail(movieId))
+      >(movieKeys.detail(movieId()))
 
       // remove local state so that server state is taken instead
       setComment(undefined)
 
-      queryClient.setQueryData(movieKeys.detail(movieId), {
+      queryClient.setQueryData(movieKeys.detail(movieId()), {
         ...previousData,
         movie: {
           ...previousData?.movie,
@@ -41,10 +42,13 @@ export const useMovie = (movieId: string) => {
       return { previousData }
     },
     onError: (_: any, __: any, context: any) => {
-      queryClient.setQueryData(movieKeys.detail(movieId), context.previousData)
+      queryClient.setQueryData(
+        movieKeys.detail(movieId()),
+        context.previousData,
+      )
     },
     onSettled: () => {
-      queryClient.invalidateQueries({ queryKey: movieKeys.detail(movieId) })
+      queryClient.invalidateQueries({ queryKey: movieKeys.detail(movieId()) })
     },
   }))