useQuery gql once from the db and then from the cache after the first request

Question

time for a new question. Each page as a query simular like:

const {data} = useQuery(EXAMPLE)

export const EXAMPLE = gql`
    query homePage(
        $orderBy: PostOrderByInput
        $userId: ID
    ) {
        posts(                   //Individual query for each page
            orderBy: $orderBy
            userId: $userId
        ) {
            id
            title
          } 
      userUserRelation{  //alway the same query. Need this request just once
            id
        }   
    }
`;

The posts query is individual. Always different variables for each page. The userUserRelation query is alway the same. I just need the userUserRelation once from the db, at the first visited page. Then I can query it from the cache. Is there a possibility to make the posts request always from the db and the userUserRelation query just once from the db and then from the cache? Comparable like @client

Of course I can solve this with a global state. And make a extra gql without the userUserRelation after the fist request. Or I make a extra useQuery (But then I have 2 queries the fitst time...)

THX for any help.

Answer 1

You should split your query into two separate hooks. That way userUserRelation will only be fetched once as long as you use the default fetchPolicy of cache-first.

export const POSTS_QUERY = gql`
  query Posts(
    $orderBy: PostOrderByInput
    $userId: ID
  ) {
    posts(orderBy: $orderBy, userId: $userId) {
      id
      title
    } 
    userUserRelation {
      id
    }   
  }
`;

export const USER_QUERY = gql`
  query User {
    userUserRelation {
      id
    }   
  }
`;

const { data: userData } = useQuery(USER_QUERY)
const { data: postsData } = useQuery(POSTS_QUERY, { variables: { ... } })

If you want the queries to be fetched inside a single request initially, you can enable batching for your client.