Any best practices on naming queries and fragments and query reuse?

[RIP21]

Hi there!

Is there a guide on how to reuse queries correctly and what's a good idea and what's not? Also how you approach the naming of queries and mutations and how do you use fragments maybe? :)

Currently, I try to use fragments to build a query up from the consumer components up to the place where it's getting fetched to avoid overfetching. Something similar to what Relay does by design AFAIK.

Is it a good approach?

And a bit of how Graphcache works:
Keeping in mind we have schema awareness enabled.
If I have a query that already fetched 10 fields from the field on the Query type, and another query that calls the same field on the Query type, but 5 fields only and non of them are unique, will it be a cache hit or name of the query should match?
What if there are 5 fields and 1 field is unique and never been fetched, will it fetch only 1, or it will refetch the whole 6? :)

Thanks!

[JoviDeCroock]

When you use the normalized cache and your fields are in the cache it should be a hit, sometimes the cache will need some additional information. Like when you have a list-view and you go to the detail-view of one of the items, you can solve this with cache.resolve as documented here.

So generally if the schema tells us a field is nullable and missing --> we'll fetch it and mark your query as stale
If the fields are in cache for the given query we'll give you the information

When the root field doesn't know the connection, for instance Query.todos vs Query.todo(id: x) we can use the cache.resolve technique.

[RIP21]

Yup, just reading cache awareness section of the docs now, all clear now, pretty cool!
What about naming and other things I asked tho :) Any hints here or maybe articles? :)

[JoviDeCroock]

The approach I'm currently taking is quite similar to yours, let's look at an example:

export const TODO_FRAGMENT = gql`
  fragment TodoFields on Todo {
    id
    text
  }
`;

export const Todo = () =>

Where a component that uses the Todo function to produce VDOM will import the fragment and incorporate it in the query, this means that all components define their own data-requirements and makes refactoring that little bit easier. Hope that makes sense.

Naming queries themselves has the benefit of defining an operationName which can ease up debugging but generally we don't really use it in the cache layer.

[RIP21]

Yup, this is exactly what I'm doing also adding a type afterward after a _ to ensure global uniqueness. So smth Button_UserSettings or Card_UserDetails etc. as CardFields will clash instantly :)

I'm using graphql-codegen so I have to spread fragments manually unsure there is any "magical" like relay automatic query builder from the VDOM for urql.

[JoviDeCroock]

We are working on something like that #1221 and #1408

[RIP21]

@JoviDeCroock YES PLEASE! :) That would be top-notch :)