@rhangai/vue-fetch-context

Library to fetch arbitrary data on components according to its context

Getting started

yarn add @rhangai/vue-fetch-context rxjs

Create your fetcher structure

import {
	FetchResult,
	createFetchContextMixins,
} from "@rhangai/vue-fetch-context";

export interface User {
	name: string;
}

export interface IFetcher {
	user(): FetcherResult<User>;
}

export const FetchContextMixins = createFetchContextMixins<IFetcher>(Vue);

Use on your components

import { FetchContextMixins } from "...";

export default Vue.extend({
	name: "Userinfo",
	mixins: [
		FetchContextMixins.Data({
			fetch: ({ fetcher }) => fetcher.user(),
		}),
	],
	template: `
		<div>
			{{state.data.name}}
		</div>
	`,
});

Then, implement the fetcher and use it in the context

import { of } from "rxjs";
import { IFetcher } from "..";

class Fetcher implements IFetcher {
	user() {
		return of({ name: "John doe" });
	}
}

export default Vue.extend({
	components: {
		Userinfo,
	},
	data: () => ({
		fetcher: new Fetcher(),
	}),
	template: `
		<fetch-context :fetcher="fetcher">
			<userinfo />
		</fetch-context>
	`,
});