How to run multiple queries at once in Cell?

Get Help and Help Others
1

Previously I have used this technique to run multiple queries at once using GraphQL and Apollo Client.

image
image1400×477 103 KB

Should I be able to transfer this technique into RedwoodJS, because (and this is probably due to mistakes on my part) I cannot get it to work?

1 Like
2

Hey @chris.johnson,

You can make use of the same technique, by importing the useQuery hook we expose:

import { useQuery } from '@redwoodjs/web'

If you want to do something like that from a cell, you can add multiple queries in the same cell:

export const QUERY = gql`
    query Q {
       /*...postsFields...*/ 
      /* ...commentsFields...*/
    }
`

Or you could create multiple cells.

1 Like
3

Hi @peterp,

Thanks for your reply. What would be the recommend Redwood method; multiple cells or multiple queries in the same cell? Would you foresee a problem with multiple queries in the same cell if you also wanted to pass in different variables to the individual queries?

Something like this will only work for multiple queries if the additional queries are fairly basic?

  query FIND_POST_BY_ID($id: Int!) {
    post: post(id: $id) {
      id
      title
      body
      createdAt
      authorId
      categoriesSelected {
        id
      }
    }
    categories: categories {
      id
      name
    }
  }
4

I’ve thought about this a little bit - so wanted to put in my 2p and discuss

Single cell, Multiple queries
Better in cases where you need all of the data to proceed through the UX. An example of this would be creating a token that gets used in a form submission, and fetching some other data (common in payments/CSRF tokens, etc.)

This is because, there’s no point in partially loading the data - the user wouldn’t be able to proceed anyway.

Multiple Cells
Better in the case you can do partial renders on your page. An example of this would be Load blog posts, Load stats. It’s still useful to the user to see just the blog posts or just the stats.

Error handling is easier this way too, I think, because each cell already has its own Error block

I’ll leave it to peter to answer which is the more idiomatic way for redwood though!

2 Likes
5

I don’t think there’s a single good answer for an best practice here, as it depends on the data you want to retrieve and the user experience that you’re trying to achieve.

I don’t think this would be a problem.

1 Like
6

Is there some other way to access the root data attribute of the query? In the below query the prop post is available in the success component, or an alias can be used. However, how do I access the categories data, because this isn’t nested within the post data and as a result I cannot see it available in the props?

  query FIND_POST_BY_ID($id: Int!) {
    post: post(id: $id) {
      id
      title
      body
      createdAt
      authorId
      categoriesSelected {
        id
      }
    }
    categories: categories {
      id
      name
    }
  }
7

@chris.johnson Just to confirm, you’re saying you can’t destructure categories like this right?

export const Success = ({ post, categories }) => {
  ...
}
2 Likes
8

Sorry, don’t know why I didn’t do that! Your quite right. Thanks

1 Like