Skip to content

Releases: logaretm/villus

v0.4.1

17 Feb 22:55
Compare
Choose a tag to compare
v0.4.1 Pre-release
Pre-release

Same as 1.0.0.alpha-4 but for Vue 2.x release line

v0.4.0

17 Feb 22:53
Compare
Choose a tag to compare
v0.4.0 Pre-release
Pre-release

Added query batching and typed errors to the Vue 2.x release line

v1.0.0-alpha.4

14 Feb 19:19
Compare
Choose a tag to compare
v1.0.0-alpha.4 Pre-release
Pre-release

⚑ Enhancements

  • Added support for async context functions thanks to @altitudems (#16)

v1.0.0-alpha.3

24 Jan 15:54
Compare
Choose a tag to compare
v1.0.0-alpha.3 Pre-release
Pre-release

πŸ†• Features

Added Query batching plugin

Read the docs for more information on how to use it.

v1.0.0-alpha.2

17 Jan 19:46
Compare
Choose a tag to compare
v1.0.0-alpha.2 Pre-release
Pre-release

tldr:

Breaking change, now useQuery, useMutation, useSubscription and Query, Mutation and Subscription components will no longer expose an errors prop/slot-prop and will instead expose a single error prop/slot-prop

This PR adds the ability to fully type responses returned from executing queries, mutations, and subscriptions.

Typed Queries

You can type your queries like this:

interface Post {
  id: number;
  title: string;
  slug: string;
  isLiked: boolean;
}

interface PostQueryResponse {
  posts: Post[];
}

const { data } = useQuery<PostQueryResponse>({ query: '{ posts { id title } }' });

return { data };

You can also type your variables:

interface Post {
  id: number;
  title: string;
  slug: string;
  isLiked: boolean;
}

interface FindPostQueryResponse {
  post: Post;
}

interface PostQueryVariables {
  id: number;
}

const { data } = useQuery<FindPostQueryResponse, PostQueryVariables>({
  query: `
    query FindPost($id: Int!) {
      post(id: $id) { id title }
    }`,
  variables: { id: 12 }
});

return { data };

And you will get typing support when providing variables to your query, the useMutation function is identical to useQuery.

Typed Subscriptions

First, you can type the response just like previously seen with useQuery:

interface Message {
  id: number;
  message: string;
}

const { data } = useSubscription<Message>({ query: `subscription { newMessages }` });

return { messages: data };

This isn't very useful because subscriptions are event-based, meaning rarely you will be using a single return value from the active subscription, that is why useSubscription accepts a reducer that acts as subscription handler, this PR allows you to fully type-proof it:

interface Message {
  id: number;
  message: string;
}


const { data } = useSubscription<Message, string[]>(
  { query: `subscription { newMessages }` },
  (oldMessages, response) => {
    if (!response.data || !oldMessages) {
      return oldMessages || [];
    }

    return [...oldMessages, response.data.message];
  }
);

Both oldMessages and response will be typed and data will now have a type of string[] instead of Message.


Typed Errors

This is a breaking change, now useQuery, useMutation, useSubscription and Query, Mutation and Subscription components will no longer expose an errors prop/slot-prop and will instead expose a single error prop/slot-prop, that error object is typed as such:

interface CombinedError extends Error {
  name: 'CombinedError';
  message: string;
  response: any;
  networkError?: Error;
  graphqlErrors?: GraphQLError[];
  isGraphQLError: boolean;
}

This allows you to have better handling and fine-grained control over which error type to handle.

1.0.0-alpha.1

11 Jan 17:02
Compare
Choose a tag to compare
1.0.0-alpha.1 Pre-release
Pre-release
  • Implemented suspend for useQuery and Query component

v0.3.0

11 Jan 17:02
Compare
Choose a tag to compare
v0.3.0 Pre-release
Pre-release
  • Implemented useQuery, useMutation and useSubscription.

0.2.4

22 Dec 21:27
Compare
Choose a tag to compare
0.2.4 Pre-release
Pre-release

Republished under the villus pkg name