{"id":22781715,"url":"https://github.com/rayzler/tanstack-query","last_synced_at":"2025-06-28T12:32:44.820Z","repository":{"id":238227691,"uuid":"796143792","full_name":"Rayzler/TanStack-Query","owner":"Rayzler","description":"Proyectos simples para practicar TanStack Query con React","archived":false,"fork":false,"pushed_at":"2024-05-05T14:11:07.000Z","size":111,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-30T14:41:42.910Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Rayzler.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-05-05T04:13:36.000Z","updated_at":"2024-12-25T12:05:47.000Z","dependencies_parsed_at":"2024-05-05T05:20:02.020Z","dependency_job_id":"c7b2671d-c254-4c8c-bcc8-29d3a37fbdad","html_url":"https://github.com/Rayzler/TanStack-Query","commit_stats":null,"previous_names":["rayzler/tanstack-query"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/Rayzler/TanStack-Query","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Rayzler%2FTanStack-Query","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Rayzler%2FTanStack-Query/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Rayzler%2FTanStack-Query/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Rayzler%2FTanStack-Query/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Rayzler","download_url":"https://codeload.github.com/Rayzler/TanStack-Query/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Rayzler%2FTanStack-Query/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":262431538,"owners_count":23310064,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-12-11T21:08:14.380Z","updated_at":"2025-06-28T12:32:44.622Z","avatar_url":"https://github.com/Rayzler.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Práctica de TanStack Query\r\n\r\nTanStack Query es una librería para manejar el estado de manera asíncrona en base a las respuestas de las peticiones a un\r\nservidor.\r\n\r\n\u003chr/\u003e\r\n\r\n### `QueryClientProvider`\r\n\r\nEs el componente que provee el contexto de TanStack Query, toma como prop `client` que es una instancia de `QueryClient`\r\nque después se puede acceder con el hook `useQueryClient`.\r\n\r\n```jsx\r\nconst queryClient = new QueryClient();\r\n\u003cQueryClientProvider client={queryClient}\u003e\r\n    \u003cApp /\u003e\r\n\u003c/QueryClientProvider\u003e;\r\n```\r\n\r\n\u003chr/\u003e\r\n\r\n### `useQuery`\r\n\r\nEs un hook que permite realizar peticiones a un servidor y manejar la respuesta como un estado.\r\n\r\nEs como hacer un GET y guardar la respuesta en un estado.\r\n\r\nAlgunas propiedades que retorna son:\r\n\r\n* `isLoading`: Indica si la petición está en curso.\r\n* `isError`: Indica si hubo un error en la petición.\r\n* `data`: Contiene la respuesta de la `queryFn`, es el estado.\r\n* `refetch`: Permite volver a realizar la petición.\r\n\r\nAlgunas propiedades que se pueden configurar son:\r\n\r\n* `queryKey`: Es el identificador de la petición.\r\n* `queryFn`: Es la función que se ejecuta para realizar la petición.\r\n* `refetchOnWindowFocus`: Indica si se deben volver a pedir los datos no actualizados al volver a enfocar la ventana.\r\n* `staleTime`: Indica el tiempo que se considera que la respuesta está actualizada.\r\n* `retry`: Indica la cantidad de veces que se debe reintentar la petición en caso de error.\r\n\r\n```jsx\r\nconst { isLoading, isError, data, refetch } = useQuery \u003cT\u003e({\r\n    queryKey: [\"data\"],\r\n    queryFn: fetchData,\r\n    refetchOnWindowFocus: false,\r\n    staleTime: 1000 * 60 * 5, // 5 minutes\r\n    retry: 3\r\n});\r\n```\r\n\r\n\u003chr/\u003e\r\n\r\n### `useInfiniteQuery`\r\n\r\nEs como `useQuery` pero para peticiones paginadas, tiene las mismas propiedades y configuraciones que `useQuery`.\r\n\r\nAlgunas propiedades extra que retorna son:\r\n\r\n* `fetchNextPage`: Permite pedir la siguiente página.\r\n* `hasNextPage`: Indica si aun hay páginas por pedir.\r\n\r\nAlgunas propiedades extra que se pueden configurar son:\r\n\r\n* `getNextPageParam`: Es una función que recibe la última página, que son los datos de la última petición, y retorna el\r\n  parámetro para obtener la siguiente página.\r\n* `initialPageParam`: Es el parámetro para obtener la primera página.\r\n* `maxPages`: Indica la cantidad máxima de páginas que se pueden guardar en memoria, si se supera se eliminan las\r\n  primeras.\r\n\r\n```jsx\r\nconst { isLoading, isError, data, refetch, fetchNextPage, hasNextPage } = useInfiniteQuery\u003cT\u003e({\r\n    queryKey: [\"users\"],\r\n    queryFn: fetchUsers,\r\n    getNextPageParam: (lastPage: T) =\u003e lastPage.nextPage,\r\n    initialPageParam: 1,\r\n    refetchOnWindowFocus: false,\r\n    staleTime: 1000 * 60 * 5, // 5 minutes\r\n    retry: 3,\r\n    maxPages: 5\r\n});\r\n```\r\n\r\n\u003chr/\u003e\r\n\r\n### `useQueryClient`\r\n\r\nEs un hook que permite acceder al cliente de TanStack Query, el cual tiene métodos para manipular el estado de las\r\npeticiones.\r\n\r\n```jsx\r\nconst queryClient = useQueryClient();\r\n```\r\n\r\n* `setQueryData`: Permite modificar el estado de una petición, pero solo en memoria, no realiza una nueva petición.\r\n  Recibe\r\n  el identificador del estado a modificar y un callback que recibe el estado actual y retorna el nuevo estado.\r\n\r\n```jsx\r\nqueryClient.setQueryData([\"data\"], (oldData) =\u003e {\r\n    return { ...oldData, newData };\r\n});\r\n```\r\n\r\n* `invalidateQueries`: Marca las peticiones con el identificador indicado como no actualizadas, por lo que TanStack Query\r\n  volverá a pedir los datos.\r\n\r\n```jsx\r\nawait queryClient.invalidateQueries({\r\n    queryKey: [\"data\"]\r\n});\r\n```\r\n\r\n* `cancelQueries`: Cancela las peticiones con el identificador indicado que se encuentren en curso.\r\n\r\n```jsx\r\nawait queryClient.cancelQueries({\r\n    queryKey: [\"data\"]\r\n});\r\n```\r\n\r\n\u003chr/\u003e\r\n\r\n### `useMutation`\r\n\r\nEs un hook que permite realizar peticiones de mutación a un servidor y manejar la respuesta como un estado.\r\n\r\nEs como hacer un POST, PUT, DELETE, etc.\r\n\r\nEl estado en cache no se actualiza automáticamente, se debe hacer manualmente.\r\n\r\nAlgunas propiedades que retorna son:\r\n\r\n* `mutate`: Manda a llamar la función de mutación `mutationFn`, recibe como argumento los datos a enviar.\r\n* `isPending`: Indica si la petición está en curso.\r\n\r\nAlgunas propiedades que se pueden configurar son:\r\n\r\n* `mutationFn`: Es la función que se ejecuta para realizar la petición.\r\n* `onMutate`: Es una función que se ejecuta antes de realizar la petición, lo que retorne se pasa a `onError` y\r\n  `onSettled` como contexto.\r\n* `onSuccess`: Esta función se llama si la mutación es exitosa. Recibe tres argumentos: los datos devueltos por la\r\n  mutación, los datos que se pasaron a la función `mutate`, y el contexto que se devolvió desde `onMutate`.\r\n* `onError`: Esta función se llama si la mutación falla. Recibe tres argumentos: el error que ocurrió, los datos que se pasaron a la función `mutate`, y el contexto que se devolvió desde `onMutate`.\r\n* `onSettled`: Esta función se llama después de que la mutación se haya completado, ya sea con éxito o con error. Recibe cuatro argumentos: los datos devueltos por la mutación, el error si ocurrió, los datos que se pasaron a la función `mutate`, y el contexto que se devolvió desde `onMutate`.\r\n\r\n```jsx \r\nconst { mutate, isPending } = useMutation({\r\n    mutationFn: postData,\r\n    onMutate: async (newData) =\u003e {\r\n        // Cancelar las peticiones en curso para evitar inconsistencias\r\n        await queryClient.cancelQueries([\"data\"]);\r\n        // Guardar los datos actuales para poder regresarlos en caso de error\r\n        const previousData = queryClient.getQueryData([\"data\"]);\r\n        // Agregar los nuevos datos al cache mientras se realiza la petición\r\n        queryClient.setQueryData([\"data\"], (oldData) =\u003e {\r\n            return { ...oldData, newData };\r\n        });\r\n        // Retornar los datos actuales para poder regresarlos en caso de error\r\n        return { previousData };\r\n    },\r\n    onSuccess: (data, newData, context) =\u003e {\r\n        console.log(\"Success\");\r\n    },\r\n    onError: (error, newData, context) =\u003e {\r\n        // Regresar los datos anteriores en caso de error\r\n        queryClient.setQueryData([\"data\"], context.previousData);\r\n    },\r\n    onSettled: async (data, error, newData, context) =\u003e {\r\n        // Opcional: Volver a pedir los datos para asegurar que estén actualizados\r\n        await queryClient.invalidateQueries({\r\n            queryKey: [\"data\"]\r\n        });\r\n    }\r\n});\r\n```\r\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frayzler%2Ftanstack-query","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frayzler%2Ftanstack-query","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frayzler%2Ftanstack-query/lists"}