fragments

[hyusetiawan]

what's the best practice in terms of co-locating data request with the components using fragments? I see there is a small explanation here: https://gqty.dev/guides/react/write#fragments but i can't seem to wrap my mind around it as it does not have the source code I can browse.

Is there a short example of how a fragment from a component can be shared into the larger queries?

[vicary]

Basically you break out selection functions like this, make only relevant selections.

// components/foo.tsx
export const prepareQuery = ({ foo }: QueryNode) => ({ foo });

// components/bar.tsx
export const prepareQuery = ({ bar }: QueryNode) => ({ bar });

And you may fetch everything at once top-level, such as page.tsx or +page.svelte.

// page.tsx
const query = useQuery({
  prepare: (query) => {
    const node = query.node({ id: 1 });
    
    return {
      ...prepareFoo(node),
      ...prepareBar(node),
    };
  }
});

// +page.svelte

/** @type {import('./$types').PageLoad} */
export async function load({ params }) {
  return await resolve((query) => {
    const node = query.node({ id: 1 });
    
    return {
      ...prepareFoo(node),
      ...prepareBar(node),
    };
  });
}

But with selection combination built-in in GQty, you usually get combined queries without needing to maintain your own fragments except sharing mutation selections with query components.