quave:react-data

quave:react-data is a Meteor package that allows you to subscribe to publications and also call methods.

Features

Call methods with await
Subscribe to data with skip logic
Deps array to resubscribe

Why

Almost every Meteor application with React is using Subscriptions and Methods, so it's helpful to provide React Hooks ready to use in common cases.

Installation

meteor add quave:react-data

Usage

Both methods listed below rely on the idea of providing a single object to Meteor.call and also to Meteor.subscribe as the second parameter.

It means that you should send the data to the server putting in the arg field.

For example, instead of using Meteor.call('myMethod', param1, param2); you should do Meteor.call('myMethod', { param1, param2 });. Of course, using the method provided instead of Meteor.call.

The same for Meteor.subscribe but also using useData and in this case, as we have many ways to use it, you should use a named property called arg to send your arguments to the server.

We have decided this way because of our long experience with Meteor projects and as these calls are creating contracts (APIs) between the client and the server clear named objects are better in the long term than positional arguments. This will make your Meteor project more reliable in the long term and easier to maintain.

`useMethod`

Return a method function that is async. You can call it with a method name and an argument.

Example:

1import { useMethod } from 'meteor/quave:react-data';
2
3export const Snapshot = () => {
4  const { method } = useMethod();
5
6  const save = async () => {
7    const snapshot = await method('saveSnapshot', {
8      snapshot: {
9        _id: snapshotId,
10        items
11      },
12    });
13    clear();
14  };
15  
16  // continue to render...
17}

`useData`

Subscribe to a publication and find the data.

Example:

1import { useData } from 'meteor/quave:react-data';
2import { useLoggedUser } from 'meteor/quave:logged-user-react';
3
4export const Home = () => {
5  const { loggedUser } = useLoggedUser();
6  
7  const {
8    data: snapshots,
9    loading
10  } = useData({
11    publicationName: 'mySnapshots',
12    skip: !loggedUser,
13    find: () => SnapshotsCollection.find({}, { sort: { at: -1 } }),
14  });
15
16  // continue to render...
17}

A more complex example:

1import { useData } from 'meteor/quave:react-data';
2
3export const Snapshot = () => {
4  const navigate = useNavigate();
5  const snapshotId = useParams()[RouteParams.SNAPSHOT_ID];
6
7  const { data: snapshotItems } = useData({
8    publicationName: 'mySnapshots',
9    arg: { snapshotId },
10    skip: !snapshotId,
11    deps: [snapshotId],
12    dataReturnWhenLoading: [],
13    find: () =>
14      SnapshotItemsCollection.find({ snapshotId }, { sort: { at: -1 } }),
15  });
16
17  // continue to render...
18}

shouldSkip property is also available, it works like skip, but it is a function instead of a static property.

Extra Features

In some cases is nice to inject some argument in all the method calls and subscribes, for example, providing the language from the client or timezone.

We export a method called setGetAdditionalArgsFunction so you can provide additional args for all the calls and subscribe in a single place.

Example:

1import React from 'react';
2import { Meteor } from 'meteor/meteor';
3import { createRoot } from 'react-dom/client';
4import { App } from '../app/general/App';
5import { setGetAdditionalArgsFunction } from 'meteor/quave:react-data';
6import { getLanguage } from '../imports/infra/languages';
7
8setGetAdditionalArgsFunction(() => {
9  const language = getLanguage();
10  return { filter: { language } };
11});
12
13Meteor.startup(() => {
14  const root = createRoot(document.getElementById('app'));
15  root.render(<App />);
16});

Limitations

This package uses internally to handle errors automatically in Method calls another quave package called quave:alert-react-tailwind. Since quave:alert-react-tailwind@2.0.0 we only React Router v6 or newer.

Feel free to open PRs changing this limitation if that affects you badly.

License

MIT