0.5.33 • Published 1 year ago

@wundergraph/solid-query v0.5.33

Weekly downloads
-
License
Apache-2.0
Repository
github
Last release
1 year ago

WunderGraph Solid Query Integration

wunderctl

This package provides a type-safe integration of Solid Query with WunderGraph. Solid Query is a data fetching library for Solid.js.

Warning: Only works with WunderGraph.

Getting Started

npm install @wundergraph/solid-query @tanstack/solid-query

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

// wundergraph.config.ts
configureWunderGraphApplication({
  // ... omitted for brevity
  codeGenerators: [
    {
      templates: [templates.typescript.client],
      // the location where you want to generate the client
      path: '../src/components/generated',
    },
  ],
});

Second, run wunderctl generate to generate the code.

Now you can configure the hooks. Create a new file, for example lib/wundergraph.ts and add the following code:

import { createHooks } from '@wundergraph/solid-query';
import { createClient, Operations } from './components/generated/client';

const client = createClient(); // Typesafe WunderGraph client

export const { createQuery, createMutation, createSubscription, createFileUpload, useUser, useAuth } =
  createHooks<Operations>(client);

In your App.tsx add QueryClientProvider:

import { QueryClient, QueryClientProvider } from '@tanstack/solid-query';

const queryClient = new QueryClient();

export default App() {
  return (
    <QueryClientProvider client={queryClient}>
      <div>...</div>
    </QueryClientProvider>
  );
}

Now you can use the hooks in your components:

createQuery

const weather = createQuery({
  operationName: 'Weather',
  input: { forCity: city },
});

createQuery (Live query)

const weather = createQuery({
  operationName: 'Weather',
  input: { forCity: city },
  liveQuery: true,
});

createSubscription

const weather = createSubscription({
  operationName: 'LiveWeather',
  input: {
    forCity: 'Berlin',
  },
});

createMutation

const mutation = createMutation({
  operationName: 'SetName',
});

mutation.mutate({ name: 'WunderGraph' });

await mutation.mutateAsync({ name: 'WunderGraph' });

createFileUpload

const uploader = useFileUpload();

uploader.upload({
  provider: 'minio',
  files: new FileList(),
});

await uploader.upload({
  provider: 'minio',
  files: new FileList(),
});

uploader.fileKeys; // files that have been uploaded

useAuth

const { login, logout } = useAuth();

login('github');

logout({ logoutOpenidConnectProvider: true });

useUser

const user = useUser();

user.data;

queryKey

You can use the queryKey helper function to create a unique key for the query in a typesafe way. This is useful if you want to invalidate the query after mutating.

const queryClient = useQueryClient();

const mutation = useMutation({
  operationName: 'SetName',
  onSuccess() {
    queryClient.invalidateQueries(queryKey({ operationName: 'Profile' }));
  },
});

mutation.mutate({ name: 'WunderGraph' });

Options

You can use all available options from Solid Query.

0.5.33

1 year ago

0.5.32

1 year ago

0.5.31

1 year ago

0.5.30

1 year ago

0.5.29

1 year ago

0.5.28

2 years ago

0.5.27

2 years ago

0.5.26

2 years ago

0.5.10

2 years ago

0.5.11

2 years ago

0.5.18

2 years ago

0.5.19

2 years ago

0.5.16

2 years ago

0.4.48

2 years ago

0.5.17

2 years ago

0.4.49

2 years ago

0.5.14

2 years ago

0.5.15

2 years ago

0.4.47

2 years ago

0.5.12

2 years ago

0.5.13

2 years ago

0.5.4

2 years ago

0.5.3

2 years ago

0.5.6

2 years ago

0.5.5

2 years ago

0.5.0

2 years ago

0.5.2

2 years ago

0.5.1

2 years ago

0.5.8

2 years ago

0.5.7

2 years ago

0.5.9

2 years ago

0.5.21

2 years ago

0.5.22

2 years ago

0.5.20

2 years ago

0.4.50

2 years ago

0.5.25

2 years ago

0.5.23

2 years ago

0.5.24

2 years ago

0.4.42

2 years ago

0.4.43

2 years ago

0.4.40

2 years ago

0.4.41

2 years ago

0.4.46

2 years ago

0.4.44

2 years ago

0.4.45

2 years ago

0.4.31

2 years ago

0.4.32

2 years ago

0.4.30

2 years ago

0.4.39

2 years ago

0.4.37

2 years ago

0.4.38

2 years ago

0.4.35

2 years ago

0.4.36

2 years ago

0.4.33

2 years ago

0.4.34

2 years ago

0.4.28

2 years ago

0.4.29

2 years ago

0.4.27

2 years ago

0.4.20

2 years ago

0.4.21

2 years ago

0.4.9

2 years ago

0.4.8

2 years ago

0.4.26

2 years ago

0.4.24

2 years ago

0.4.25

2 years ago

0.4.22

2 years ago

0.4.23

2 years ago

0.4.19

2 years ago

0.4.10

2 years ago

0.4.17

2 years ago

0.4.18

2 years ago

0.4.15

2 years ago

0.4.16

2 years ago

0.4.13

2 years ago

0.4.14

2 years ago

0.4.11

2 years ago

0.4.12

2 years ago

0.4.5

2 years ago

0.3.6

2 years ago

0.4.4

2 years ago

0.3.5

2 years ago

0.4.7

2 years ago

0.3.8

2 years ago

0.4.6

2 years ago

0.3.7

2 years ago

0.4.1

2 years ago

0.3.2

2 years ago

0.4.0

2 years ago

0.3.1

2 years ago

0.4.3

2 years ago

0.3.4

2 years ago

0.4.2

2 years ago

0.3.3

2 years ago

0.3.0

2 years ago

0.2.0

2 years ago