Tips on integrating with JSON:API?

[madisonbullard]

I'm investigating architecture for an upcoming project at work which might be using the JSON:API spec, which I have never used. For reasons specific to the UI use case, I'd like to use React Query on the frontend, which I also have never used. I couldn't find any examples of the two used together in practice, and before I do too much digging I'm wondering if there are strong opinions that might help me determine whether or not to use them in conjunction.

Any shared experience would be most helpful 😄 thanks!

[tannerlinsley]

You can definitely use them together. We are also investigating ways to use schemas and specs like JSON APIs to make React Query even "smarter" than it already is. For now though, you can follow the documentation as is and you won't have any issues.

[rnevius]

1. Irrelevant
2. JSON:API widely used in the industry.

The point is that it would be GREAT if patterns such as pagination were supported out of the box using this "standard".

You're right, it's all just JSON, so we can do whatever we want with it. In the case of pagination, it will mean parsing the page param from the JSON:API link.

Cheers to all working on this library. It's awesome.

[TkDodo]

The point is that it would be GREAT if patterns such as pagination were supported out of the box using this "standard".

yeah, but react-query is not a data fetching library. It's an agnostic, Promise based, async state manager. It would also be great if it supported graphql schemas and normalized caching. But all of those things I'd like to move into user-land, where you can build your own, more restricted and more powerful abstraction over react-query. It's not something we'll add to the lib itself. hope that makes sense.

[rnevius]

Makes a lot of sense, thanks @TkDodo

[rostgoat]

@rnevius what did you end up doing?

[rnevius]

@rostgoat I had to parse the response for the nextPageParam and then I used useMemo to memoize the result of flattening the pages into a single array of data (maybe not necessary). For example:

const { data, fetchNextPage, isFetchingNextPage, isFetching } =
  useInfiniteQuery({
    queryKey: [
      'groupProjects',
      { group_id: group.id },
    ],
    queryFn: fetchProjects,
    getNextPageParam: (lastPage) =>
      lastPage?.links?.next,
    keepPreviousData: true,
    placeholderData: { pages: [], pageParams: [] },
  });

const groupProjects = useMemo(
  () => data.pages.map((page) => page.data).flat(),
  [data],
);