profile
viewpoint

Ask questionsQuery component empty `data` {} when refetching data

I have a Project type that has various attributes and relations. One relation is Participations which relates a User to a Project.

When the page loads the entire project gets loaded using the following query:

GET_PROJECT

    project(id: $id) {
      id
      isFinished
      name
      startDate
      endDate
      organization {
        id
        types {
          id
          name
        }
      }
      client {
        id
      }
      participations {
        id
        type {
          id
          name
        }
        user {
          id
          email
          organizations {
            id
          }
        }
      }
    }

There's a sub component that updates the project Participations. This subcomponent uses refetchQueries (just for testing purposes) to update the participations list.

Refetch query (GET_PROJECT_PARTICIPATIONS)

    project(id: $id) {
      id
      participations {
        id
        type {
          id
          name
        }
        user {
          id
          email
        }
      }
    }

There's an issue with the data reconciliation in apollo because by using the following refetch query, the data object from the parent component (the one that has the entire Project query, GET_PROJECT) gets empty.

I've already debugged server responses, everything has an ID, no errors are popping anywhere, the last thing missing is something funky happening in Apollo. The Apollo cache get's correctly updated after the mutation and refetch query and the project is still there. Why then the data object from the GET_PROJECT Query components gets updated and it's now an empty object?

PS: I've already tested with network-only policies

Version

  • apollo-boost@0.1.9
  • react-apollo@2.1.5

More info

Parent component:

<Query
    query={GET_PROJECT}
    fetchPolicy="cache-and-network"
    variables={{ id: props.match.params.id }}
  >
    {Project(props)}
  </Query>

Inside Project component:

<Mutation
    refetchQueries={[
      {
        query: GET_PROJECT_PARTICIPATIONS,
        variables: { id: props.id },
      },
    ]}
    mutation={CREATE_PARTICIPATION}
  >
    {(mutate, result) => (
      (...)
    )}
  </Mutation>

const CREATE_PARTICIPATION = gql`
  mutation createParticipation($data: CreateParticipationInput!) {
    createParticipation(input: $data) {
      id
      user {
        id
      }
      type {
        id
        name
      }
    }
  }
`;

CREATE_PARTICIPATION response: {"data":{"createParticipation":{"id":"57","user":{"id":"4","__typename":"User"},"type":null,"__typename":"Participation"}}}

GET_PROJECT_PARTICIPATIONS Response (refetch query): {"data":{"project":{"id":"1","participations":[{"id":"54","type":{"id":"3","name":"Quality Assurance","__typename":"Type"},"user":{"id":"3","email":"marques@gmail.com","__typename":"User"},"__typename":"Participation"}],"__typename":"Project"}}}

apollographql/react-apollo

Answer questions mkonicek

Upgrading fixed the bug for me:

"apollo": "^2.28.3"

previously I was on 2.25.0 and had this bug.

While at it, I also upgraded a bunch of other libraries:

"apollo": "^2.28.3",
"@apollo/react-hooks": "^3.1.5",
"apollo-cache-inmemory": "^1.6.6",
"apollo-client": "^2.6.10",
"apollo-link": "^1.2.14",
"apollo-utilities": "^1.3.4",
"react-apollo": "^3.1.5"
useful!

Related questions

Using MockedProvider results in error "No more mocked responses for the query: ..." hot 3
useLazyQuery execution function should return a promise hot 2
Fresh new install gives unmet peer dependencies warnings with yarn hot 2
Upgrading to 3.0.1 gives the following: Invariant violation: Could not find "client" hot 2
"Invalid hook call." error while using `Query` or `useQuery` with react-apollo 3 hot 1
currentObservable.query.fetchMore is not a function - react-apollo hot 1
MockedProvider can't mock queries with client directives hot 1
Attempted import error: &#39;compose&#39; is not exported from &#39;react-apollo&#39; hot 1
Query result proposal: use actual data or {} to enable easier destructuring hot 1
currentObservable.query.getCurrentResult is not a function hot 1
Apollo MockedProvider with client directives hot 1
Could not find "client" in the context of ApolloConsumer when using react-apollo 2.5.3 with MockedProvider hot 1
useQuery infinite loop re-rendering - react-apollo hot 1
watchQuery is not a function - react-apollo hot 1
MockedProvider does not return data when fetchPolicy is set to &#34;cache-and-network&#34; - react-apollo hot 1
source:https://uonfu.com/
Github User Rank List