10.45.2 • Published 3 days ago

@trpc/react-query v10.45.2

Weekly downloads
-
License
MIT
Repository
github
Last release
3 days ago

@trpc/react

Connect a tRPC server to React.

Documentation

Full documentation for @trpc/react-query can be found here

Installation

# npm
npm install @trpc/react-query@next @tanstack/react-query

# Yarn
yarn add @trpc/react-query@next @tanstack/react-query

# pnpm
pnpm add @trpc/react-query@next @tanstack/react-query

Basic Example

Create a utils file that exports tRPC hooks and providers.

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

export const trpc = createTRPCReact<AppRouter>();

Use the provider to connect to your API.

import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import React from 'react';
import { useState } from 'react';
import { trpc } from '~/utils/trpc';

export function App() {
  const [queryClient] = useState(() => new QueryClient());
  const [trpcClient] = useState(() =>
    trpc.createClient({
      url: 'http://localhost:5000/trpc',
    }),
  );
  return (
    <trpc.Provider client={trpcClient} queryClient={queryClient}>
      <QueryClientProvider client={queryClient}>
        {/* Your app here */}
      </QueryClientProvider>
    </trpc.Provider>
  );
}

Now in any component, you can query your API using the proxy exported from the utils file.

import { proxy } from '~/utils/trpc';

export function Hello() {
  const { data, error, status } = proxy.greeting.useQuery({ name: 'tRPC' });

  if (error) {
    return <p>{error.message}</p>;
  }

  if (status !== 'success') {
    return <p>Loading...</p>;
  }

  return <div>{data && <p>{data.greeting}</p>}</div>;
}
11.0.0-rc.366

3 days ago

11.0.0-rc.364

9 days ago

11.0.0-rc.363

9 days ago

11.0.0-rc.362

9 days ago

11.0.0-rc.361

10 days ago

11.0.0-rc.359

11 days ago

11.0.0-rc.354

15 days ago

11.0.0-rc.351

18 days ago

11.0.0-rc.348

19 days ago

11.0.0-rc.347

19 days ago

11.0.0-rc.346

19 days ago

11.0.0-rc.345

20 days ago

11.0.0-rc.342

21 days ago

11.0.0-rc.340

27 days ago

11.0.0-rc.334

1 month ago

11.0.0-rc.332

1 month ago

11.0.0-rc.330

1 month ago

11.0.0-rc.329

1 month ago

11.0.0-next.326

1 month ago

11.0.0-next.325

1 month ago

11.0.0-next.327

1 month ago

11.0.0-next.322

1 month ago

11.0.0-next.324

1 month ago

11.0.0-next.323

1 month ago

11.0.0-next.320

2 months ago

10.45.2

2 months ago

10.45.2-canary.0

2 months ago

10.45.1

3 months ago

10.45.1-canary.24

3 months ago

10.45.1-canary.23

3 months ago

10.45.1-canary.20

4 months ago

10.45.1-canary.17

4 months ago

10.45.1-canary.16

4 months ago

10.45.1-canary.13

4 months ago

10.45.1-canary.11

4 months ago

10.45.1-canary.9

4 months ago

10.45.1-canary.8

4 months ago

10.45.0

5 months ago

10.45.1-canary.1

5 months ago

10.45.1-canary.0

5 months ago

10.45.1-canary.3

5 months ago

10.45.1-canary.2

5 months ago

10.45.1-canary.4

4 months ago

10.44.2-canary.30

5 months ago

10.44.2-canary.32

5 months ago

10.44.2-canary.31

5 months ago

10.44.2-canary.34

5 months ago

10.44.2-canary.33

5 months ago

10.44.2-canary.37

5 months ago

11.0.0-alpha.131

5 months ago

10.41.0

7 months ago

10.38.1

8 months ago

10.38.0

9 months ago

10.38.3

8 months ago

10.38.2

8 months ago

10.38.5

8 months ago

10.38.4

8 months ago

10.42.0

7 months ago

10.39.0

7 months ago

10.36.0

10 months ago

10.40.0

7 months ago

10.37.0

9 months ago

10.37.1

9 months ago

10.34.1

10 months ago

10.34.0

10 months ago

10.35.0

10 months ago

10.43.5

6 months ago

10.43.4

6 months ago

10.43.7

6 months ago

10.43.6

6 months ago

10.43.1

6 months ago

10.43.0

7 months ago

10.43.3

6 months ago

10.43.2

6 months ago

11.0.0-next.92

7 months ago

11.0.0-next.91

7 months ago

10.44.0

6 months ago

10.44.1

6 months ago

10.33.1

10 months ago

10.33.0

11 months ago

10.30.0

11 months ago

10.32.0

11 months ago

10.31.0

11 months ago

10.28.0

12 months ago

10.26.0

12 months ago

10.24.0

1 year ago

10.28.1

12 months ago

10.28.2

11 months ago

10.27.0

12 months ago

10.27.1

12 months ago

10.25.0

1 year ago

10.25.1

1 year ago

10.23.1

1 year ago

10.29.0

11 months ago

10.27.2

12 months ago

10.29.1

11 months ago

10.27.3

12 months ago

10.21.3-alpha.3

1 year ago

10.21.3-alpha.2

1 year ago

10.21.3-alpha.9

1 year ago

10.21.3-alpha.8

1 year ago

10.21.3-alpha.7

1 year ago

10.22.0

1 year ago

10.21.3-alpha.1

1 year ago

10.21.1-alpha.2

1 year ago

10.21.1-alpha.1

1 year ago

10.21.1-alpha.0

1 year ago

10.21.3-test.0

1 year ago

10.23.0

1 year ago

10.21.2

1 year ago

10.21.0

1 year ago

10.21.1

1 year ago

10.20.0

1 year ago

10.17.0

1 year ago

10.15.0

1 year ago

10.19.1

1 year ago

10.19.0

1 year ago

10.16.0

1 year ago

10.14.1

1 year ago

10.18.0

1 year ago

10.14.0

1 year ago

10.13.1

1 year ago

10.13.2

1 year ago

10.13.0

1 year ago

10.12.0

1 year ago

10.9.1

1 year ago

10.11.1

1 year ago

10.10.0

1 year ago

10.11.0

1 year ago

10.5.0

1 year ago

10.6.0

1 year ago

10.7.0

1 year ago

10.8.0

1 year ago

10.9.0

1 year ago

10.8.1

1 year ago

10.8.2

1 year ago

10.4.3

1 year ago

10.4.2

1 year ago

10.4.1

1 year ago

10.4.0

1 year ago

10.3.0

1 year ago

10.2.0

1 year ago

10.1.0

1 year ago

10.0.0

1 year ago

10.0.0-rc.9

1 year ago

10.0.0-rc.8

1 year ago

10.0.0-rc.7

2 years ago

10.0.0-rc.6

2 years ago

10.0.0-rc.5

2 years ago

10.0.0-rc.4

2 years ago

10.0.0-rc.3

2 years ago

10.0.0-rc.2

2 years ago

10.0.0-rc.1

2 years ago

10.0.0-rc.0

2 years ago