[Documentation] How to access fragments on lazy-loaded components

[lukepighetti]

Some patterns recommended by vue-apollo break patterns we commonly use when writing Vue apps. Here's an example.

<template>
  <div class="flex flex-col justify-center items-center">
    <div class="font-bold text-2xl">Episodes</div>
    <EpisodeCard v-for="film in films" :key="film.id" :film="film" />
  </div>
</template>

<script>
import { gql } from "apollo-boost";
// import EpisodeCard from "@/components/EpisodeCard.vue"; /// B. Does work

export default {
  name: "HelloWorld",
  components: {
    EpisodeCard: () => import("@/components/EpisodeCard.vue") /// A. Doesn't work,
    // EpisodeCard /// B. Does work
  },
  apollo: {
    films: {
      query: gql`
        query {
          allFilms {
            films {
              ...film
            }
          }
        }

        ${EpisodeCard.fragments.film}
      `,
      update({ allFilms }) {
        return allFilms.films.sort((a, b) => a.episodeID - b.episodeID);
      }
    }
  }
};
</script>

vue-apollo suggests storing fragments in the default export object of a component, and then accessing them from the imported component. However, we lazy-load all of our components as shown above, which seems to make it impossible to reference the fragments property.

It appears that a core tenant of how to deal with co-located fragments in vue-apollo doesn't work with modern vue patterns

[Akryum]

You can put the fragments in a sibling JS file instead.

[lukepighetti]

There are no options that allow colocating fragments with lazy-loaded components?

[Akryum]

You can't use code from an async chunk without loading it first. That's not technically possible, the browser can't guess what your code is without loading it.

[lukepighetti]

That is known. However, the view isn't being rendered until after that async chunk is loaded, so I would expect the vue-apollo query to fire after the async chunk is loaded. That would seem to provide a possibility for loading the component async and then referencing the co-located fragment, but I'm not aware of how this would be done with existing (or future) tooling.

[Akryum]

The component you have the query in is not lazy loaded. Thus the query is executed.

[Austio]

I think the core here is that we should have a recommendation/plan on a best practice for being able to allow components to define their data needs so that a parent can compose them.

IMO, that should be in a file next to the component or in a global graphql folder. I know that is not perfect but it is easy and works with existing infra. The issue with placing them in the child and working in above way would require

• a: patch apollo to block until your component is lazily loaded in order to get the fragment, which would break most of the benefit of lazy loading
• b: patch apollo to be able to use some loader to parse all the components js and be able to inline the fragment you reference at build time into the component