Is there a straightforward way to sort a useQuery query result?

[tonyketcham]

When trying to sort const posts = query.posts() ?? []; on the client-side by a field prior to rendering them, doing something like:

<>
  {posts
      .sort(...) // sort on the updatedAt field
      .map(
        ({ id, name, updatedAt }) =>
          id &&
          name &&
          updatedAt && (
            <PostCard
              key={id}
              name={name}
              id={id}
              updatedAt={updatedAt}
            />
          ),
      )}
</>

results in some behavior I didn't expect. Rather than sorting, one post is repeated for each post proxy, such that the return of the posts.sort() map to <PostCard/> consists of the correct amount of posts but they're all the exact same element.

React then confirms with this error:

Warning: Encountered two children with the same key, `d5716695-8eb8-44e2-a36f-27c027986b4e`.

Would love to know if this is an issue with something I'm doing or an issue with GQty 🙂

[PabloSzx]

Array .sort mutates the array trying to be sorted, so that's the first issue you are going to encounter, you can't sort the proxies returned by gqty, you can create another array and then sort that array, but not directly the one returned by the gqty client

[tonyketcham]

Nice - thanks for the clarification & suggestion there!