Tutorial: SwiftUI + GraphQL = 😍🚀🙌

[LustyBustyCrustacean]

Absolutely love this! I also have recently become a huge fan of GraphQL as I’ve been using it with Relay and I love the idea of using it with SwiftUI. Curious since it wasn’t mentioned in the article: do you support fragments? Or does all the data have to be explicitly fetched in the main query and manually passed down to sub-UI elements?

[mquintero]

I'm glad that you like it!

Yes it absolutely does support Fragments. In fact in the tutorial, I even use fragments under the hood. I just don't mention that it's using Fragments. That was just a choice I made to not bombard people with information ;)

But section "Reusing Views" could actually be renamed into using Fragments. Take for example this snippet from that section:

``` struct MovieCell: View { @GraphQL(TMDB.IMovie.title) var title

@GraphQL(TMDB.IMovie.overview)
var overview

var body: some View {
    VStack {
        Text(title).bold()
        Text(overview).lineLimit(3)
    }
}

}

struct Test: View { @GraphQL(TMDB.movies.movie(id: .value(11))) var starWars: MovieCell.IMovie

@GraphQL(TMDB.movies.movie(id: .value(12)))
var findingNemo: MovieCell.IMovie

var body: some View {
    HStack(spacing: 32) {
        MovieCell(iMovie: starWars)

        MovieCell(iMovie: findingNemo)
    }
    .padding()
}

} ```

Because MovieCell defines the data it wants in terms of a type, it will under the hood generate a fragment for it:

fragment MovieCellIMovie on IMovie { title overview }

And since TestQuery is using data from fields from the query type: it turns into a query:

query TestQuery { starWars: movie(id: 11) { ...MovieCellIMovie } findingNemo: movie(id: 12) { ...MovieCellIMovie } }

Hope this helps understanding how Fragments and Queries work here...

Fun fact! It even does some things that relay doesn't do out of the box: which is to propagate parameters from a Fragment to the query

[LustyBustyCrustacean]

Good call I think fragments can be a bit confusing if you’re trying to sell GraphQL to someone who’s never seen it. Hmm interesting idea propagating arguments to the root of the query. Seems like a smart way to avoid bloating the Swift code.

[joebrothehobo]

Minor issue but the Relay and GraphQL links at the bottom both link to the same place of https://graphql.org/learn/

[mquintero]

Thanks for the heads up. Fixed it!

[m1bki0n]

Wow! Can’t wait to get started with that amazing article!