Fork me on GitHub
#pathom
<
2024-03-20
>
Danny Almeida06:03:11

sorry for being a noob, but how does GraphQL

... on MyComponent {
   name
   id 
}
translate to EQL ?

wilkerlucio12:03:27

hello Danny, the short answer is: it doesn't, Pathom doesn't have the concept of types like graphql, so there is no need ever to ask the engine to go into some specific type. in what context you are looking at this?

Danny Almeida22:03:18

thanks for the reply @U066U8JQJ. Well we have data coming from a CMS - and the shape of data necessitates these kind of queries to decide which component to call to display the data. The page is displayed by calling the CMS back-end which returns data which composes of components for a page. Depending on the component, we retrieve the property and then pass it to the JSX component to render it on the page. I was wondering how that would translate into a Fulcro defsc component and how the query would be managed if I were to implement it in Fulcro. That's why I asked this question. Hope i'm making sense.

wilkerlucio00:03:07

I think you are looking for union queries, they are a way to dispatch different queries depending on some criteria, but I like to advise that depending on your case you might not need it

wilkerlucio00:03:40

usually we do union queries when the different types of query are mostly different, but if they serve a mostly simular thing, with a few differences, them you might just wanna ask for all the attributes

wilkerlucio00:03:48

which case sounds more like yours?

Danny Almeida00:03:19

not sure really - i'll give you an example - the backend data is retreived using Graphql, We retrieve page content - which is a higher level query - not reaching deeper levels. Then based on the components, we send component queries to get component data for all components of a specific type for that page. Now these components themselves are composed of other compositions. So for e.g a Carousal component might have a mix of Testimonial component, Showcase component, Richtext component etc. That's where there we use ... on Showcasecomponent { attributes } ... on Testimonialcomponent { attributes } in the query

Danny Almeida00:03:46

this is one of the queries we use for a component - just to give you an idea of what i'm talking about

Danny Almeida00:03:12

so i'm not sure if i were to do this in Fulcro, how i would go about translating that into component queries

Danny Almeida00:03:54

Hi @U066U8JQJ, no apologies - i'm grateful that you took the time to respond. Yes, you are right, this is an existing NextJS based project and the query is sent to an Umbraco CMS backend. The query fetches the data for the page components and then NextJS renders the component. The entire page is a composition of different components to give flexibility in page design. That's why we have ... on ComponentX { attributes } in the graphql query as we don't know which components will be there on a specific page. The reason the query is so big is due to the depth i..e nodes - Page -> folder -> components. I've extracted only the last part data here - let me know if this helps

node {
                              __typename
                              name
                              level
                              updateDate
                              sortOrder
                                ... on Showcase {
                                     showcaseTitle
                                     showcaseDescription
                                     showcaseImage {
                                        url
                                     }
                                     showcaseType
                                     showcaseTestimonials {
                                        content {
                                            ... on TestimonialComponentCOMP {
                                                    authorName
                                                    testimonialTimestamp
                                                    testimonialAvatar {
                                                        url
                                                    }
                                                    testimonialMessage
                                                }
                                        }
                                     }
                                     showcaseCTAList {
                                        content {
                                          ... on CtaComponentCOMP {
                                            contentTypeAlias
                                            backgroundColour
                                            heading
                                            link {
                                                name
                                                target
                                                url
                                            }
                                            text

                                        }
                                        }
                                     }
                                }                                
                         }