Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@trpc/react-query

Package Overview
Dependencies
Maintainers
3
Versions
715
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@trpc/react-query

The tRPC React library

  • 10.45.2
  • latest
  • Source
  • npm
  • Socket score

Version published
Maintainers
3
Created

What is @trpc/react-query?

@trpc/react-query is a package that integrates tRPC with React Query, allowing you to create type-safe APIs and use them in your React applications with ease. It provides a seamless way to fetch, cache, and synchronize server data with your client-side state.

What are @trpc/react-query's main functionalities?

Type-safe API calls

This feature allows you to make type-safe API calls using tRPC and React Query. The `useQuery` hook fetches data from the server and provides loading and error states.

import { createReactQueryHooks } from '@trpc/react-query';
import { AppRouter } from './server/router';

const trpc = createReactQueryHooks<AppRouter>();

function MyComponent() {
  const { data, error, isLoading } = trpc.useQuery(['getUser', { id: 1 }]);

  if (isLoading) return <div>Loading...</div>;
  if (error) return <div>Error: {error.message}</div>;

  return <div>User: {data.name}</div>;
}

Mutations

This feature allows you to perform mutations, such as creating or updating data on the server. The `useMutation` hook provides methods to trigger the mutation and handle its result.

function MyComponent() {
  const mutation = trpc.useMutation('createUser');

  const handleCreateUser = async () => {
    try {
      await mutation.mutateAsync({ name: 'John Doe' });
      alert('User created successfully');
    } catch (error) {
      alert('Error creating user: ' + error.message);
    }
  };

  return <button onClick={handleCreateUser}>Create User</button>;
}

Optimistic Updates

This feature allows you to perform optimistic updates, where the UI is updated immediately while the mutation is being processed. The `onMutate`, `onError`, and `onSettled` callbacks help manage the optimistic update lifecycle.

function MyComponent() {
  const queryClient = useQueryClient();
  const mutation = trpc.useMutation('updateUser', {
    onMutate: async (newData) => {
      await queryClient.cancelQueries(['getUser', { id: newData.id }]);
      const previousData = queryClient.getQueryData(['getUser', { id: newData.id }]);
      queryClient.setQueryData(['getUser', { id: newData.id }], newData);
      return { previousData };
    },
    onError: (err, newData, context) => {
      queryClient.setQueryData(['getUser', { id: newData.id }], context.previousData);
    },
    onSettled: () => {
      queryClient.invalidateQueries(['getUser', { id: newData.id }]);
    }
  });

  const handleUpdateUser = async () => {
    await mutation.mutateAsync({ id: 1, name: 'Jane Doe' });
  };

  return <button onClick={handleUpdateUser}>Update User</button>;
}

Other packages similar to @trpc/react-query

FAQs

Package last updated on 11 Mar 2024

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc