Villus Versions Save

🪄 gql.tada support

This release brings full type support for gql.tada #206

import { graphql } from 'gql.tada';
import { useQuery } from 'villus';

const getBooksQuery = graphql(`
  query GetBooks {
    books {
      id
      title
    }
  }
`);

const { data, error } = useQuery({
  query: getBooksQuery
});

🆕 New Features

Added useQuery data mappers. Similar to subscriptions, you can now pass a second argument to useQuery to map the data and it will be fully typed.

const { data, error } = useQuery(
  {
    query: new TypedDocumentString<{ posts: Post[] }, never>(`
    query Posts {
      posts {
        id
        title
      }
    }
  `),
  },
  ({ data }) => {
    return data?.posts.map(p => p.id) || [];
  },
);

data.value;
//^ number[]

👕 TypeScript

• Exported mutation execution options type #203 thanks to @jbaubree

🆕 @villus/batch

You can now add an exclusion filter as config for the batch plugin to force specific queries to be executed in a non-batched request.

<script setup>
import { useClient } from 'villus';
import { batch } from '@villus/batch';

useClient({
  url: 'https://test.com/graphql',
  // Exclude all queries named "Posts"
  use: [batch({ exclude: ({ query }) => /query Posts/.test(query) })],
});
</script>

🆕 New features

• Exported normalizeQuery helper that converts a query (string, or a document object) to a string.
• New onData and onError for the useMutation composable if you prefer to use callback style for handling, thanks to @jbaubree (#197)

🆕 New features

• Added support for TypedDocumentString introduced with GraphQL codegenrator ecosystem

💣 Breaking Changes

This release contains minor breaking changes, mainly subscriptions reducer arguments order being flipped and onSuccess hook being renamed.

You can read how to migrate by checking this guide.

🆕 New features

• Added isFetching to useSubscription until the first data event is received.
• Added initialData to useSubscription options to provide an initial data.
• Subscription forwarder can now be asynchronous.
• Added onData and onError hooks on the return type of useQuery, so you can register multiple hooks anytime. Read more here.

🐛 Bug Fixes

• Fixed a few issues with re-subscribing due to variable changes (b88190b8528d6d9dfd7aad7514647cce6f2b4bff)

🆕 Enhancements

• Added skip to useSubscription to unsubscribe or wait until some conditions are met before subscribing (b88190b8528d6d9dfd7aad7514647cce6f2b4bff)
• Allow the subscription forwarder to be async

🆕 New features

Thanks to @jbaubree for suggesting implementing event hooks, which is a little nicer than using a watcher for detecting when a query concludes or fails.

onSuccess

This is called whenever a new result is available.

<script setup>
import { useQuery } from 'villus';

const { data } = useQuery({
  query: GetPostById,
  variables,
  onSuccess: (data) => {
    console.log(data)
  },
});
</script>

onError

It is triggered when an error occurs.

<script setup>
import { useQuery } from 'villus';

const { data } = useQuery({
  query: GetPostById,
  variables,
  onError: (err) => {
    console.log(err)
  },
});
</script>

🐛 Bugs Fixed

• Subscription forwarder not receiving a nomralized query string (7a502495c17b8b34dc6edd6ecc5fc5620bb279c0) #188

👕 TypeScript

• Changed the internal ObserverLike interface to require next and error and complete functions. This makes it more compatible with graphql-ws sink type which is the recommended WebSocket implementation (0c91f11d44da84195636327f908a265769d72cb6) #154 #186

A couple of nice features to help with the caching and fetching logic of mutations and queries. As always, feedback is welcome and make sure to report any bugs you encounter.

🆕 New Features

Added the ability to tag queries using the tags option when calling useQuery. This marks a query with the specified tags for a couple of features.

Clearing tagged queries cache after mutation

const { data } = useQuery(GetPosts, {
  tags: ['all_posts'],
});

// This will clear the previous query cache whenever `execute` concludes successfully.
const { execute } = useMutation(CreatePost, {
  clearCacheTags: ['all_posts'],
});

Refetching tagged queries cache after mutation

const { data } = useQuery(GetPosts, {
  tags: ['all_posts'],
});

// This will auto-fetch the previous query whenever `execute` concludes successfully.
const { execute } = useMutation(CreatePost, {
  refetchTags: ['all_posts'],
});

This refetching bypasses the cache so it will also clear the affected queries cache as well, so there is some overlap between clearing and autofetching.

👕 TypeScript

• Fixed a couple of typing issues with useMutation and its execute() where the data and error values returned were not nullable #182 (#183)