When should I use the read/writeQuery and when the read/writeFragment while working with the Apollo Cache?

Viewed 45

I'm working with the Apollo local cache and I found that the read/writeQuery works in the same way as read/writeFragment. Both of them do the same thing and the only difference at my opinion is just that the readQuery returns an object that contains the query name as a key and the query result as a value. The readFragment returns the query result object itself.

Based on the official documentation about readQuery I could assume that it executes the query and returns the data. About the readFragment things look the same. The only difference is that in the case of Fragment I should pass the composed ID of the required item that Apollo cache uses itself. But the result is totally the same as in the case of readQuery except that it returns the object of values.

Here is the code example. Sorry, there are will be a lot of cumbersome boilerplate. Simple but a lot to demonstrate the problem in very detail.

The schema of the Track (I'll omit other types to reduce the code boilerplate):

  type Track {
    id: ID!
    title: String!
    author: Author!
    thumbnail: String
    length: Int
    modulesCount: Int
    description: String
    numberOfViews: Int
    modules: [Module!]!
  }

The readQuery example with the all the Track fields:

const { track } = client.readQuery({
    query: gql`
      query getTrack($trackId: ID!) {
        track(id: $trackId) {
          id
          title
          author {
            id
            name
            photo
          }
          thumbnail
          length
          modulesCount
          numberOfViews
          modules {
            id
            title
            length
          }
          description
        }
      }
    `,
    variables: {
      trackId: 'c_1',
    },
  });

The result is:

{
    "__typename": "Track",
    "id": "c_1",
    "title": "FAMOUS CATSTRONAUTS",
    "author": {
        "__typename": "Author",
        "id": "cat-2",
        "name": "Grumpy Cat",
        "photo": "https://images.unsplash.com/photo-1593627010886-d34828365da7?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&ixid=eyJhcHBfaWQiOjExNzA0OH0"
    },
    "thumbnail": "https://res.cloudinary.com/dety84pbu/image/upload/v1598474100/famous_cats_epuqcr.jpg",
    "length": 1916,
    "modulesCount": 5,
    "numberOfViews": 26,
    "modules": [
        {
            "__typename": "Module",
            "id": "l_10",
            "title": "Neil Armstrong",
            "length": 321
        },
        {
            "__typename": "Module",
            "id": "l_11",
            "title": "Yuri Gagarin",
            "length": 470
        },
        {
            "__typename": "Module",
            "id": "l_12",
            "title": "Buzz Aldrin",
            "length": 545
        },
        {
            "__typename": "Module",
            "id": "l_13",
            "title": "John Glenn",
            "length": 357
        },
        {
            "__typename": "Module",
            "id": "l_14",
            "title": "Chris Hadfield",
            "length": 223
        }
    ],
    "description": "Be inspired by famous catstronauts who have made their names legend from across the galaxies. Special guest appearance included, so hold on to your boots!"
}

Now the readFragment example (all fields):

const track = client.readFragment({
    id: 'Track:c_1',
    fragment: gql`
      fragment MyTrack on Track {
        id
        title
        author {
          id
          name
          photo
        }
        thumbnail
        length
        modulesCount
        numberOfViews
        modules {
          id
          title
          length
        }
        description
      }
    `
  });

The result is the same as in the case of the readyQuery.


Now the example with the partial fields. For the readQuery:

  const { track } = client.readQuery({
    query: gql`
      query getTrack($trackId: ID!) {
        track(id: $trackId) {
          id
          title
        }
      }
    `,
    variables: { // Provide any required variables here.  Variables of mismatched types will return `null`.
      trackId: 'c_1',
    },
  });

The result will be:

{
    "__typename": "Track",
    "id": "c_1",
    "title": "FAMOUS CATSTRONAUTS"
}

The readFragment (partial fields)

  const track = client.readFragment({
    id: 'Track:c_1',
    fragment: gql`
      fragment MyTrack on Track {
        id
        title
      }
    `
  });

The result will be the same as readyQuery!

My question: When should I use the readQuery and when the readFragment? It looks like they provide the same result.


The same for writeQuery and the writeFragment. They do the same at the first look.

writeQuery partial update code example:

client.writeQuery({
    query: gql`
      query WriteTrack($trackId: ID!) {
        track(id: $trackId) {
          id
          title

        },
      }`,
      data: { // Contains the data to write
      track: {
        __typename: 'Track',
        id: 'c_1',
        title: 'Buy grapes ',
      },
      
    },
    variables: {
      id: 'c_1'
    }
  })

writeFragment partial update code example:

 client.writeFragment({
    id: 'Track:c_1',
    fragment: gql`
    fragment MyTrack on Track {
      id
      title
    }
  `,
  data: {
    __typename: 'Track',
    id: 'c_1',
    title: 'Buy grapes ',
  }
  })

The result is the same. Both update the title. So what is the difference?
When should I use the writeQuery and when the writeFragment? Thanks for any help and your patience and time!

0 Answers
Related