Problems sorting by a relationship field

[dkanthofer]

Link to reproduction

N/A

Describe the Bug

When sorting a list by a relationship field, it actually sorts by the related document's ID. It should be alphabetically sorted by the field defined in useAsTitle of the related collection.

As you can see in the screenshot, the Testrelation column seems to be sorted randomly, while in fact this is the alphabetical order of the IDs from the related collection.

To Reproduce

1. Add a field like this to a collection:

{
  name: 'testrelation',
  type: 'relationship',
  relationTo: 'relationExamples',
},

2. Then in the relationExamples collection, add at least a title field and define it as the useAsTitle:

const RelationExamples: CollectionConfig = {
  slug: 'relationExamples',
  admin: {
    useAsTitle: 'title',
    listSearchableFields: ['title'],
  },
  fields: [
    {
      name: 'title',
      type: 'text',
    },
  ],
}

3. Generate some entries in both collections and be sure to fill in the relationships
4. Now open the first collection and click one of the sort arrows next to the Testrelation column header.
5. You can check against the API that the sorting order is based on the ID, not the title

Payload Version

2.0.13

Adapters and Plugins

db-mongodb, bundler-webpack

[jessrynkar]

Hi @dkanthofer - currently this is the expected behavior. We would like to accomodate sorting on relationship fields in the future, which will require building some new functionality - so I'm going to convert this to a feature request and we'll get it on our roadmap.

For now, a potential workaround would be to customize the id. Adding a new text field with the name id to your collection will replace the default value. You could also use a field hook to automatically populate this field so you don't need to write it out twice.

EDIT: The workaround above is outdated and no longer recommended, it is likely to cause further issues and complications in your project.

[tamas-marton]

@markusahrweileramcon In case the user manually rewrite the URL's sort query parameter in the browser's address bar, it works indeed (in Payload v3). It doesn't qualify even as a workaround, since you can't expect users to rewrite URLs manually, plus the sorting arrow buttons all get an inactive style, so there's no visual clue about the current sorting. It's just to show that Payload's backend and admin UI already handles such a sorting scenario by URL, so it's probably just a matter of patching some admin UI component(s).

[markusahrweileramcon]

@tamas-marton
I directly used the api. Also, since v3 now uses SSR by default, we use the payload client and feed the parameters directly into the find function: sort: searchParams.get('sort') || undefined

[markusahrweileramcon]

Alright. After updating to 3.38.0 it looks like this feature is indeed implemented.
It's pretty unsatisfying, that this issue is not updated by staff

[tamas-marton]

After updating to 3.38.0 it looks like this feature is indeed implemented.

Yeah, sorry for being vague with "v3", a lesson learned :)

[tamas-marton]

It's pretty unsatisfying, that this issue is not updated by staff

Come on man. It's free software, explicitly stating "WITHOUT WARRANTY OF ANY KIND" in its license. I think it's fair to say that Payload developers owe nothing to us users (regarding either code improvements or discussion/issue management), but still work hard on resolving problems. There's no restriction on modifying your own instance, opening a PR or even start off a fork if you're unsatisfied with something.

[mathieu2em]

hi guys is it still the current behavior ?
@JessChowdhury I tried your solution with the idea of customizing the id but problem is it breaks the relationship as the relationship is linked by its id to the collection

[denolfe]

Sorting by other values should work. Field in our test suite sorted by text here. If you're seeing otherwise, I'd log an issue.

[mathieu2em]

Hi @denolfe thank you for your answer,
I believe you are talking about the behavior in the dropdown while we are talking about the behavior in the admin panel when looking at the collection.
I updated to the latest version and tried what you just showed in your link but it's not changing the behavior when I sort in my admin collection panel.
I would like the behavior to be that when I click the little arrows, on my field to sort it, for it to sort by the sortOptions that I stated or at least by what I put in the collection in useAsTitle or defaultSort.

[mathieu2em]

[matthijs166]

Is this supported in Payload 3?

[markusahrweileramcon]

afaik, no

[matthijs166]

For all our next project we are going to use the search plugin if we have overviews where we need sorting on deeper levels.

[jessrynkar]

Hi all – thanks for all the input here and sorry for the delayed response on this thread.

To clarify:

• by default, sorting the collection list by a specific field within a relationship is still not supported as of Payload v3.38.0
• when sorting by a relationship field in the admin UI, the sort query uses the related document ID, not the useAsTitle or any other field

We agree this behavior should be accommodated - ideally by sorting on useAsTitle or via a configurable option. I have added this as a new feature request so we can properly track and prioritize this on our roadmap here.

Currently our recommended workaround is to use virtual fields as outlined in this recent feature. For example, if I have a posts collection with a relationship to an author collection, I can implement a virtual field for author.name by doing the following:

collections: [
    {
      slug: 'posts',
      fields: [
        {
          name: 'title',
          type: 'text',
        },
        {
          name: 'author',
          type: 'relationship',
          relationTo: 'author',
        },
        // To sort by the author name, instead of the ID, assign it to a virtual field
        // This will create a new column in the collection view that can be used to sort
        {
          name: 'authorName',
          virtual: 'author.name',
          type: 'text',
        },
      ],
    },
    {
      slug: 'author',
      fields: [
        {
          name: 'name',
          type: 'text',
        },
      ],
    },
  ],

This virtual field will be displayed in the collection list view and can be used to sort as expected.

[tamas-marton]

Yay! Thanks for pointing out the recent feature of improved virtual field too.