Best practices: Where to put the GraphQL data fetching

[tobiasdiez]

What are the established best practices concerning the question of how tightly vue components should be coupled to the GraphQL fetching. I guess there are two main lines:

• Put data fetching and representation of the data in the same component. So, for example, in a task list control you run the GraphQL query to fetch the tasks, and then use this data to render the list.
• Separate data fetching from data displaying, by having a component that accepts the possible display data as props and then a second component that wraps this one, fetches the data and passes the result on to the display component. So, in the above example, this would be a 'TaskListPure' accepting a list of tasks as props and displaying them; and a second control 'TaskList' that runs the actual GraphQL query and passes to 'TaskListPure'.

When should one use which approach? Are the alternatives?

[smolinari]

I personally like the first one for querying. In fact, I think this is why GraphQL is even a thing. Facebook wanted querying to be part of each component. So, if you use a component anywhere, it pulls the data it needs, as it needs it. IMHO, component data is the 4th realm of responsibility covered in SFCs (next to JS, HTML, CSS) and needs to be involved in terms of reusability. Mutations are a different beast though, as they could kick-off or rather be needed in different types of processing. So, mutations are not as black and white.

Scott

[Akryum]

I agree a lot with this ^