Relay-like @plural directive

[AlecAivazis]

Discussed in https://github.com/HoudiniGraphql/houdini/discussions/239

^{Originally posted by mhzokaii March 22, 2022}
Hi!

First of all, your work is really great, congrats.

The @relay (plural: true) directive defined in Relay, is very helpful in reducing the amount of work required for passing the data down to the sub-components. I couldn't find a similar way in Houdini. Am I missing something? Is it planned to be implemented? Or even maybe you see it as an anti-pattern? Should the @list directive be used (and if yes, how can it be used in fragment definitions)?

[DerNamenlose]

Hey,

as I've run into the same use case (and seem to be unable to figure out a solution where I basically have a SomeList Svelte component which is supposed to take an array of the type created by the fragment and handle individual items further), I thought I'd give it a shot. However, I can't figure out how to start the example project. yarn generate fails every time:

/tmp/houdini/example $ yarn generate                                                                                                                                                                                                                                  
Usage Error: Couldn't find the node_modules state file - running an install might help (findPackageLocation)

$ yarn run [--inspect] [--inspect-brk] [-T,--top-level] [-B,--binaries-only] <scriptName> ...

I've done the yarn && yarn build before on the top-level dir. Any ideas what goes wrong there?
Running an install doesn't help as it will install houdini 0.15.5 into the node_modules folder of the example instead of using the changed code I'm trying to play with.

yarn is version 3.2.0, node is 18.7.0, just in case that's relevant.

[AlecAivazis]

👋 hey there! so i'll be honest, I haven't run the example application in awhile since I've been using the integration tests as my sandbox. Are you able to run that project? It's a sveltekit project so yarn dev should be all it takes.

You could also just let it install the old version, delete it, and replace it with a symlink to your local directory

[DerNamenlose]

The symlink approach fails on yarn generate with node being unable to load the graphql module in cmd.js. However, copying the directory worked for a preliminary test.

Now I'm thinking about the correct way to design the interface. I'd assumed something like this:

export function fragment<_Fragment extends Fragment<any>>(
   fragment: GraphQLTagResult,
   ref: _Fragment[] | null
): Result<_Fragment>[]

A single fragment (with the @plural directive) with an array of references which should result a set of results. Would that be in the right direction? If yes: I'd be happy about a few pointers on how to implement the actual data access.