npmpackage.info

Gathering detailed insights and metrics for @wundergraph/swr

Other packages similar to @wundergraph/swr

openpreviews

0.0.1

This example demonstrates how to use WunderGraph with [Vite](https://vitejs.dev/) and [SWR](https://swr.vercel.app).

@wundergraph/swr

WunderGraph is a Backend for Frontend Framework to optimize frontend, fullstack and backend developer workflows through API Composition.

0.19.3

2,309

Apache-2.0

TypeScript

1.26 kB

125,043

Installations

npm install @wundergraph/swr

Developer Guide

BETA

Typescript

Yes

Module System

CommonJS, ESM

Node Version

20.12.2

NPM Version

lerna/1.12.0/node@v20.12.2+x64 (linux)

Pull Requests

Open

0

Total

1,080

Closed

112

Merged

968

Issues

Open

3

Total

237

Closed

234

Releases

1,310

Release wunderctl 0.180.0

v0.180.0

Published on 15 May 2024

@wundergraph/rust-client@0.4.0

Published on 15 May 2024

@wundergraph/swr@0.19.3

Published on 15 May 2024

@wundergraph/sdk@0.184.2

Published on 15 May 2024

@wundergraph/vue-query@0.2.33

Published on 15 May 2024

@wundergraph/react-query@0.9.33

Published on 15 May 2024

View all 1,310 releases

Contributors

Unable to fetch Contributors

View all 68 contributors

Languages

TypeScript

JavaScript

CSS

Shell

HTML

Svelte

Rust

Makefile

Dockerfile

TypeScript (88.15%)

Go (9.75%)

JavaScript (1.38%)

CSS (0.33%)

Shell (0.17%)

HTML (0.14%)

Svelte (0.03%)

Rust (0.03%)

Makefile (0.02%)

Developer

wundergraph

Download Statistics

Total Downloads

125,043

Last Day

352

Last Week

1,656

Last Month

8,095

Last Year

65,361

GitHub Statistics

2,309 Stars

1,920 Commits

166 Forks

16 Watching

274 Branches

68 Contributors

Bundle Size

3.34 kB

Minified

1.26 kB

Minified + Gzipped

Bundlephobia

Maintainers

Package Meta Information

Latest Version

0.19.3

Package Id

@wundergraph/swr@0.19.3

Unpacked Size

83.65 kB

Size

17.79 kB

File Count

NPM Version

lerna/1.12.0/node@v20.12.2+x64 (linux)

Node Version

20.12.2

Publised On

15 May 2024

Total Downloads

Cumulative downloads

Total Downloads

125,043

Last day

-24%

352

Compared to previous day

Last week

1,656

Compared to previous week

Last month

4.9%

8,095

Compared to previous month

Last year

34.3%

65,361

Compared to previous year

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

Versions

WunderGraph SWR Integration

wunderctl

This package provides a type-safe integration of SWR with WunderGraph. SWR is a React Hooks library for data fetching. With just one hook, you can significantly simplify the data fetching logic in your project. And it also covered in all aspects of speed, correctness, and stability to help you build better experiences.

Warning: Only works with WunderGraph.

Getting Started

1npm install @wundergraph/swr swr@2.0.0

Before you can use the hooks, you need to modify your code generation to include the base typescript client.

1// wundergraph.config.ts
2configureWunderGraphApplication({
3  // ... omitted for brevity
4  codeGenerators: [
5    {
6      templates: [templates.typescript.client],
7      // the location where you want to generate the client
8      path: '../src/components/generated',
9    },
10  ],
11});

Second, run wunderctl generate to generate the code.

Now you can use the hooks.

1import { createHooks } from '@wundergraph/swr';
2import { createClient, Operations } from './components/generated/client';
3
4const { useQuery, useMutation, useSubscription, useUser, useFileUpload, useAuth } = createHooks<Operations>(
5  createClient({ baseURL: 'https://your-wundernode.com', extraHeaders: {}, customFetch: undefined })
6);
7
8export const Home: React.FC<{ city: string }> = ({ city }) => {
9  const { error, data, isValidating } = useQuery({
10    operationName: 'Weather',
11    input: { forCity: city },
12    liveQuery: true,
13  });
14
15  const { data: subData, error: subError } = useSubscription({
16    enabled: true,
17    operationName: 'Weather',
18    input: {
19      forCity: 'Berlin',
20    },
21  });
22
23  const { trigger } = useMutation({
24    operationName: 'SetName',
25  });
26  trigger({ name });
27
28  const { data, error } = useUser();
29
30  const { upload, data, error } = useFileUpload();
31
32  const { login, logout } = useAuth();
33};

Options

You can use all available options from SWR with the hooks. Due to the fact that we use the operationName + variables as key, you can't use the key option as usual. In order to use conditional-fetching you can use the enabled option.

Global Configuration

You can configure the hooks globally by using the SWRConfig context.

In case the context configuration isn't working, it's likely due to multiple versions of SWR being installed. To resolve this you can import SWRConfig directly from @wundergraph/swr to make sure the same instance is used.

1import { SWRConfig, useSWRConfig } from '@wundergraph/swr';

No vulnerabilities found.

No security vulnerabilities found.

Other packages similar to @wundergraph/swr

@wundergraph/swr

Installations

Developer Guide

Yes

CommonJS, ESM

20.12.2

lerna/1.12.0/node@v20.12.2+x64 (linux)

Pull Requests

0

1,080

112

968

Issues

3

237

234

Releases

Contributors

Unable to fetch Contributors

Languages

Developer

Download Statistics

GitHub Statistics

Bundle Size

3.34 kB

1.26 kB

Maintainers

Package Meta Information

Total Downloads

125,043

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

Peer Dependencies

Dev Dependencies

WunderGraph SWR Integration

Getting Started

Options

Global Configuration