[client-preset] How to reuse queries or fragments outside a component?

[mikehaertl]

I'm quite new to the GraphQL world so I may miss something. So far I've been involved in a project where we use @graphql-codegen/typescript-vue-urql. So for example in a time tracking app we defined queries and fragments related to a project entity in gql/projects.graphl and let the plugin generate code like useQueryAllProjects().

We could use this then in different places for example for the project administration section but also to populate the project dropdown in another part of the app.

Same goes for fragments which we use to type e.g. some utility methods that live outside of components and do some calculations on certian parts of a query result.

Now it seems that this plugin is discouraged in favour of client-preset. As I understand it the queries and fragments are baked into the components now.

Doesn't this limit their reuse? How would we deal with that in a use case like the one above?

[n1ru4l]

@mikehaertl Operation Document Nodes are treated like variables. You can import/export them like any other part of your application. Fragment names are globally unique.

Example import/export document

// a.ts
import { graphql } from "./graphql"

export const FooQuery = graphql(/* GraphQL */ `
  query Foo {
    foo
  }
`)

// b.ts
import { FooQuery } from "./a.js"

[mikehaertl]

Oh, I see. That makes sense. Thanks.