How are you using Data with React nowadays?

react
1

Hi all, how are you doing?

At quave we have a few Meteor projects in production and usually we have the same use cases to fetch data and call methods.

For these we have been using a few internal utilities that are now exposed as a package.

You can read more at this thread on Twitter.

This package has strong opinions, for example, on how to send arguments to the server, so I would like to know what you agree and what you don’t.

How are you doing these things in your Meteor + React projects?

5 Likes
2

I’m using Apollo with PostGres. But I was a javascript newbie when I started this app, so learning Apollo at the same time, was extra-hard. I probably could have cut my dev time in half by using Mongo and Meteor methods.

1 Like
3

We’re using react-query, we created nice hooks useQueryHook and useMutationHook that are plugged with Meteor. It uses all the benefits of this perfect library that is react-query!

5 Likes
4

This is excellent, @filipenevola :clap:t2:
I’ll give it a try! I have been looking for a solution for this for the past week, and I think this new package will be really helpful

5

For the record, I’ve mentioned this useData last year in the discussion here. :slight_smile: Finally it is published as a package. hehe

6

That sounds interesting @ivo! Could you share the code of these hooks? Or give us more details on how you have implemented them?

7

@filipenevola
this , Only supports react router 6?
Is it possible to use react router 6 in Meteor?
I remember he had problems using the meteor!

8

It’s based on what’s mentioned here

We just made very small adaptation. The mix react-query / meteor methods is pure pleasure (caching, pagination, etc… so many things under the hood)

It does not work for publication but we have 2 publications in the whole project so don’t think it’s a big issue.

3 Likes
9

I’m using React-router 6 in one of my side projects and it’s working fine

10

Plus one to the react-query shout. I’m in the process of converting our application to it - created a couple of wrapper functions to incorporate Meteor methods and typescript:

export function useQueryMethod<MethodInputType, DataReturnType>(
	queryKey: QueryKey,
	method: ValidatedMethod_Instance,
	methodData: MethodInputType
) {
	const queryFn = (): Promise<DataReturnType> => {
		return new Promise((resolve, reject) => {
			method.call(methodData, (err: Meteor.Error, res: DataReturnType) => {
				if (err) reject(err);
				resolve(res);
			});
		});
	};
	return useQuery<DataReturnType, Meteor.Error>({ queryKey, queryFn });
}

In usage:

	const {
		isLoading,
		isError,
		error,
		data: todos,
	} = useQueryMethod<MethodInputType, DataReturnType>(['querykey', methodArgs], getTodos, methodArgs);

And a similar one for useMutation…

1 Like
11

We’re actually working on 2 boilerplates:

  • one for MVP (Meteor, mui, react-query, react-router, with signup/login page included)
  • one for bigger projects (Meteor, headless UI, tailwind, react-query, react-router, with signup/login page included)

We’ll probably put one or both of them public in the near future when we’re satisfied with them.

2 Likes
12

I use react-router-dom and react-meteor-data and set props if using pub/sub or state with Method calls it’s working alright just try to follow KISS (Keep it simple stupid)

13

@hschmaiske @fredmaiaarantes @storyteller
i using this package for ssr and this not support react router v6 :
https://github.com/Meteor-Community-Packages/react-router-ssr

i open an issue but not reponse :lying_face:

This package, which is very important, does not have good support.

14

Thank you for this information

15

@filipenevola Sounds really cool! I’m using similar patterns for my project, but less generic atm.

Do you plan to include Grounded Collection for offline first support? Also, sometimes collections don’t “deserve” to be observed, since data changes rarely; so for these cases I fetch data via a method call and store it locally on the client (updating cached data in certain intervals); would be really cool to have all this in a nice hook :wink:

16

Ground db is awesome and one of the best features out there for having a pre-cache. Also look at enabling caching on react so that it’s leveraging the browser cache as this is instant and very nice on mobile when going back to previous pages etc - it just comes in instant, and then the subs will catch up and that’s really what users expect of a web app now

1 Like