diff --git a/.github/workflows/pr.yml b/.github/workflows/pr.yml index 86eedddc8a..2aad2d859d 100644 --- a/.github/workflows/pr.yml +++ b/.github/workflows/pr.yml @@ -2,8 +2,6 @@ name: PR on: pull_request: - push: - branches: ['svelte-5-adapter'] concurrency: group: ${{ github.workflow }}-${{ github.event.number || github.ref }} diff --git a/examples/react/rick-morty/index.html b/examples/react/rick-morty/index.html index 244598b0b4..8adf3c1987 100644 --- a/examples/react/rick-morty/index.html +++ b/examples/react/rick-morty/index.html @@ -6,7 +6,7 @@ -
Loading...
- if (status === 'error') returnError :(
- - const locationUrlPars = data.location.url.split('/').filter(Boolean) - const locationId = locationUrlPars[locationUrlPars.length - 1] - - return ( -Loading...
- if (status === 'error') returnError :(
- - return ( - <> - {data.name} - {data.type} - > - ) -} - -export default Character diff --git a/examples/react/rick-morty/src/Character.tsx b/examples/react/rick-morty/src/Character.tsx new file mode 100644 index 0000000000..42e37ddcac --- /dev/null +++ b/examples/react/rick-morty/src/Character.tsx @@ -0,0 +1,87 @@ +import { useParams, Link as RouterLink } from 'react-router-dom' +import { useQuery } from '@tanstack/react-query' +import { getCharacter, getEpisode, getLocation } from './api' + +function Character() { + let params = useParams() + const characterId = params.characterId! + + const { status, data } = useQuery({ + queryKey: ['character', characterId], + queryFn: () => getCharacter(characterId), + }) + + if (status === 'pending') returnLoading...
+ if (status === 'error') returnError :(
+ + const locationUrlParts = data.location.url.split('/').filter(Boolean) + const locationId = locationUrlParts[locationUrlParts.length - 1] + + return ( ++ Gender: {data.gender} +
++ Status: {data.status} +
++ Species: {data.species} +
++ Origin: {data.origin.name} +
+
+ Location:
Loading...
- if (status === 'error') returnError :(
- - console.info(data) - - return ( -Loading...
+ if (status === 'error') returnError :(
+ + return ( +Loading...
- if (status === 'error') returnError :(
- - return ( -Loading...
- if (status === 'error') returnError :(
- - return ( -Loading...
+ + if (status === 'error') returnError :(
+ + return ( +{data.air_date}
+Loading...
+ if (status === 'error') returnError :(
+ + return ( +Using the Rick And Morty API
++ (Built by{' '} + + @axelfuh + + ) +
++ In this demo you will be able to see how TanStack Query is a significant + improvement over redux, mobx, and any + other general-purpose state container. +
++ No reducers, thunks, or sagas. No ES6 models to maintain in order to tag + them as observable. +
++ Simply associate a key with your fetch call and let{' '} + TanStack Query handle the rest. +
+
+ Check out the{' '}
+