Adding a child list item and updating the parent list

[osbash]

I'm working on a component that contains an entity named "ChatGroup" that contains a child entity named "ChatMember".

class ChatGroup extends ApiResource {
    static readonly urlRoot = `/api/account/chats`
    readonly id: Data.ID = ''
    readonly name: string = ''
    readonly description: string = ''
    readonly uuid: string = ''
    readonly private: boolean = false
    readonly type: ChatGroupType = 'group'
    readonly members: ChatMember[] = []
    readonly graphic?: string
}

static schema = {
  members: [ChatMember]
}

class ChatMember extends ApiResource {
    static readonly urlRoot = `/api/account/chats/:groupId/members/:id`
    readonly id: Data.ID = ''
    readonly admin?: boolean
    readonly customerId: Data.ID = ''
    readonly inviteEnabled: boolean = false
    readonly messagesEnabled: boolean = false
    readonly groupId: Data.ID = ''
    readonly firstName: string = ''
    readonly lastName: string = ''
    readonly middleName: string = ''
    readonly fullName: string = ''
    readonly profilePhoto: string = ''
    readonly createdOn: Date = new Date()
}

I am able to list the ChatGroup entities perfectly fine and it includes the ChatMembers as it should. But, I am having difficulty adding members to the ChatGroup.members list.

I am only able to successfully add/delete ChatMember's from a group that existed on initial load. When I add a new ChatMember, I can see that the member is being added correctly using Redux tools in inspector but it is not being added as a child of the ChatGroup.

To list the groups I am using: const data = useSuspense(ChatGroup.list(), {})

I then iterate through the groups and list the members of each group. When you click on a group I have a separate view that lists all of the members and the options to add or remove a member.

When adding a member I am using: fetch(ChatMember.create(), { groupId: :id }, { customerId: :id}) , which response with the newly created chat member object.

After the ChatMember add, how can I ensure that it is being added to the correct ChatGroup cache item referencing the groupId that was used in the initial request or the groupId that was returned in the response?

[ntucker]

What version packages are you using, and can you provide the definition of ApiResource?

[osbash]

We're currently on:
rest-hooks: 6.3.4
rest-hooks/rest: 3

We're planning on upgrading to the latest within the next month or so, but need to build out this feature before tackling that sprint.

This is the two classes used for the resources:

class ChatGroup extends ApiResource {
    static readonly urlRoot = `/api/account/chats`
    readonly id: Data.ID = ''
    readonly name: string = ''
    readonly description: string = ''
    readonly uuid: string = ''
    readonly private: boolean = false
    readonly type: ChatGroupType = 'group'
    readonly members: ChatMember[] = []
    readonly graphic?: string
    readonly graphicThumbnail?: string

    static schema = {
        members: [ChatMember]
    }
}

class ChatMember extends ApiResource {
    static readonly urlRoot = `/api/account/chats/:groupId/members/:id`
    readonly id: Data.ID = ''
    readonly admin?: boolean
    readonly customerId: Data.ID = ''
    readonly inviteEnabled: boolean = false
    readonly messagesEnabled: boolean = false
    readonly groupId: Data.ID = ''
    readonly firstName: string = ''
    readonly lastName: string = ''
    readonly middleName: string = ''
    readonly fullName: string = ''
    readonly profilePhoto: string = ''
    readonly createdOn: Date = new Date()

    static get key() {
        return 'chat-members'
    }

    static url(params: Record<string, any>) {
        let url = ChatMember.urlRoot
        Object.keys(params).forEach(key => {
            url = url.replace(`:${key}`, params[key])
        })
        return url.replaceAll(/(\/:\w+)/g, '')
    }

    static listUrl(params: Record<string, any>) {
        return this.url(params)
    }
}

ApiResource is just an extension of Resource which contains our fetch method for network requests.

It handles snake_case to camelCase conversions as well as handling 204 no content responses.

The main fetch is const data = useSuspense(ChatGroup.list(), {}) which gets the Groups, then on the detailed view when adding a new chat member we call:

fetch(
      ChatMember.create(),
      { groupId: :groupId },
      {
        customerId: :id,
      },
    )

I am able to get the list to update by using invalidate(ChatGroup.detail(), { id: :groupId}) but trying to avoid the flicker on re-render.

[ntucker]

For that version the best you can do is have the ChatMember.create() return the ChatGroup so it can update it. You don't even need the whole object since it can merge it in with the existing - it just needs to see the context of the array. This is roughly the idea, but I'll show a better example below

Previously

Response

{
  "id": "abcd",
  "groupId": "lkjsdfj",
  "firstName": "bob",
}

Now

Response:

{
  "id": "groupid",
  "members": [
    "member1",
    "member2",
    {
      "id": "createdMember",
      "groupId": "lkjsdfj",
      "firstName": "bob",
    }
  ]
}

Again, this can be the full response; but you need at least this much for it to work.

Resource:

class ChatMember extends ApiResource {
    // your existing code

  static create() {
    super.create().extend({ schema: ChatGroup });
  }
}

[ntucker]

Wanna run a design idea by you:

class Chatgroup extends Entity {
  id = '';
  static schema = {
    members: new schema.Collection(ChatMember, (parent: Chatgroup, key: string) => ({groupId: parent.id}))
  }
}
class ChatMember extends Entity {
  id = '';
}

const getMembers = new RestEndpoint({
  path: '/members',
  searchParams: { groupId: '' },
  // (...args) => since this isn't nested
  schema: new schema.Collection(ChatMember, ({ groupId }) => ({ groupId })),
});
const getMembersNextPage = getMembers.extend({
  searchParams: { groupId: '', page: '' },
  // schema already removes the page, automatically appending based only on groupId
  schema: getMembers.schema.push,
});

const createMember = getMembers.extend({
  method: 'POST',
  schema: getMembers.schema.push,
});

What this means is that, creating a member would both add to getMembers endpoint (based on groupId) but also the nested members list in ChatGroup. If you want to place at the beginning you can use schema.unshift instead, and if there's an insertion algo you want, you can run schema.insert.

const members = useSuspense(getMembers, { groupId: 'bestgroup' });
const chatgroup = useSuspense(getChatGroup, { id: 'bestgroup' });
invariant(members === chatgroup.members);

We could even add a specialization to the endpoint to make createMember easier:

const createMember = getMembers.push;

ctrl.fetch(getMembers.push, { groupId: 'bestgroup'}, createdMemberData);

Adding to multiple collections

// this adds to any list *in store* that has same members as the urlParams
// so fetch(createMemberAddToMultiple, { groupId: 'bob', isAdmin: true }, data)
// would possibly add to {}, {groupId: 'bob'}, {isAdmin: true}, {groupId: 'bob', isAdmin: 'true' } - but only those already in the store
const createMemberAddToMultiple = getMembers.extend({
  method: 'POST',
  schema: getMembers.schema.push(urlParams => collectionKey =>
		Object.values(collectionKey).every(([key, value]) => urlParams[key] === value)
  ),
});

Store shape

{
	entities: {
		ChatGroup: {
			'5': { id: '5', members: '{"groupId":"bestgroup"}' },
		},
	},
	collections: {
		ChatMember: {
			'{"groupId":"bestgroup"}': ['firstId', 'secondId', 'thirdId'],
		}
	}
}

[ntucker]

Full RFC located #2566

[osbash]

This solution looks like it would do the job.

The most important part is the mapping of the foreign key (groupId) which looks to be pretty easy with the schema.Collection.

A cool update to this would be to allow assigning of foreign keys in a way similar to schema definitions.

i.e

class ChatMember extends Entity {
    readonly groupId: number = 0
    static const foreignKeys = {
      groupId: ChatGroup
    }
}

Just thinking out loud here

[ntucker]

Could you elaborate on what defining the foreignkey members would do?

[osbash]

You can ignore, I thought about it a little more and it may over complicate things

The thought was, if you were able to define a foreignKey map then you could POST with ChatMember entity and have the item be added to the ChatGroup collection based on the foreignKey map.

So the fetch flow would be ChatMember.create() -> then add the new ChatMember entity from the response to the ChatGroup that matches the groupId.

So it would cover the reverse of the example you posted above, where you add a ChatMember using the ChatGroup entity and the schema dictates where to store.

[ntucker]

Collections V1 have landed. Will release beta soon. Discussion can continue in the Collections RFC

For most up to date usage see the Collection documentation