Redux Resource
  • Home
  • Introduction
    • Motivation
    • Core Concepts
    • Similar Projects
    • Examples
  • Resources
    • Resource Reducers
    • Resource Objects
    • Meta
    • Lists
    • Modifying Resources
  • Requests
    • Request Objects
    • Keys
    • Names
    • Statuses
    • Request Actions
      • Updating Lists
      • Reading Resources
      • Updating Resources
      • Creating Resources
      • Deleting Resources
  • Other Guides
    • Usage With React
    • Tracking Request Statuses
    • Using Request Statuses
    • Custom Action Types
    • Migration Guides
  • Recipes
    • Forms
    • Canceling Requests
    • Unauthorized Responses
    • User Feedback
    • Related Resources
    • Caching
  • Ecosystem Extras
    • Redux Resource Action Creators
    • Redux Resource XHR
    • Redux Resource Prop Types
    • Redux Resource Plugins
      • HTTP Status Codes
      • Selection
      • Reset
      • Included Resources
  • FAQ
    • General
    • State Tree
    • Actions
    • Lists
  • API Reference
    • resourceReducer
    • getStatus
    • getResources
    • upsertResources
    • setResourceMeta
    • actionTypes
    • requestStatuses
Powered by GitBook
On this page
  • normalizr
  • JSON API
  • GraphQL
  1. Recipes

Related Resources

PreviousUser FeedbackNextCaching

Last updated 5 years ago

Endpoints frequently return more than one resource type in a single response. For instance, a request for a single author may also include the author's books.

Because different backends return related resources in many different ways, Redux Resource couldn't possibly include a single built-in solution that works for every API. Instead, can be used to support related resources in a way that works for your specific backend.

The rest of this guide will describe supporting related resources for the following technologies:

Would you like us to include a guide for a technology not listed here? Just !

normalizr

The works well with data. Refer to the Included Resources Plugin documentation to familiarize yourself with its API.

Here's an example demonstrating using Redux Resource with normalizr on a slice that has the Included Resources Plugin:

import { normalize, schema } from 'normalizr';
import store from './store';

const user = new schema.Entity('users');

const comment = new schema.Entity('comments', {
  commenter: user
});

const article = new schema.Entity('articles', {
  author: user,
  comments: [comment]
});

const originalData = [{
  id: '123',
  author: {
    id: '1',
    name: 'Paul'
  },
  title: 'My awesome blog post',
  comments: [
    {
      id: '324',
      commenter: {
        id: '2',
        name: 'Nicole'
      }
    }
  ]
}];

const normalizedData = normalize(originalData, [article]);

const action = {
  type: actionTypes.READ_RESOURCES_SUCCEEDED,
  // We recommend that you use the same string for the `resourceType`, resource slice,
  // and normalizr key.
  resourceType: article.key,
  resources: normalizedData.result,
  includedResources: normalizedData.entities
};

store.dispatch(action);
import { crudRequest } from 'redux-resource-xhr';
import { normalize } from 'normalizr';
import authorSchema from './schema';

export function readAuthor(authorId) {
  const xhrOptions = {
    method: 'GET',
    url: `/authors/${authorId}`,
    json: true
  };

  return dispatch => crudRequest('read', {
    dispatch,
    xhrOptions,
    actionDefaults: {
      resourceType: 'authors',
      resources: [authorId]
    },
    onSucceeded(action, res, body) {
      const normalizedData = normalize(body, authorSchema);

      dispatch({
        ...action,
        includedResources: normalizedData.entities
      });
    }
  });
}

JSON API

  1. Filter the Array of included resources to find just the resources whose

    JSON API type matches the resourceType of the slice.

You would also want to place the each individual resource's meta into the meta section of the slice.

GraphQL

If you're using the library, you can perform this normalization in the onSucceeded callback:

At the moment, the easiest way to support JSON API compound documents is to use the library, and then follow the normalizr guide above.

An official JSON API plugin is being . We would love your help!

If you would like to try your hand at writing a JSON API relationship plugin, here are a few tips. In short, you would need to interpet the included member of a . This would likely work in 2 steps:

Use to add those resources to the slice.

We would love to support GraphQL, but we need your help. If you're interested in helping out, please to chat about it. Thank you!

redux-resource-xhr
jsonapi-normalizr
planned
compound document
upsertResources
open an issue
plugins
open an issue
Included Resources Plugin
normalizr
normalizr
JSON API
GraphQL