Refactoring depricated updateQuery - cache updates but data attr doen't

Help
,
1

When refactoring updateQuery away and using typePolicies instead new network request is done right and also cache (InMemory) updates correctly but data attr does not update and so react never renders new places on map.

Can’t figure out what could be wrong

Sources for help refactoring

Old implementation

 const client = new ApolloClient({
  uri: process.env.REACT_APP_GRAPHQL_API,
  cache: new InMemoryCache(),
}); 


  const { loading, error, data, fetchMore } = useQuery(MAP, {
    variables: {
      latitude: 64.00,
      longitude: 22.22,
      distance: 200,
      groupId: 1,
      locale: "fi",
    },
  });

  const updateQuery = (previousResult, { fetchMoreResult }) => {
    if (!fetchMoreResult) return previousResult;
    return {
      ...previousResult,
      placesByLocation:
        [
          ...previousResult.placesByLocation,
          ...fetchMoreResult.placesByLocation,
        ]),
      journeysByLocation: [
          ...previousResult.journeysByLocation,
          ...fetchMoreResult.journeysByLocation,
        ]),
    };
  };

    fetchMore({
      variables: {
        latitude: 68.00,
        longitude: 23.00,
        distance: 600,
      },
      updateQuery: updateQuery,
    });

New implementation

Tried both concatPagination and merge with typePolicy. No difference in result.

const client = new ApolloClient({
  uri: process.env.REACT_APP_GRAPHQL_API,
  cache: new InMemoryCache({
    typePolicies: {
      PlacesOnMap: {
        fields: {
          journeysByLocation: concatPagination(["groupId", "locale"]),
          placesByLocation: {
            keyArgs: ["locale", "groupId"],
            merge(existing = [], incoming) {
              return [...existing, ...incoming];
            },
          },
        },
      },
    },
  }),
});

  const { data, fetchMore } = useQuery(MAP, {
    variables: {
      latitude: 64.00,
      longitude: 22.22,
      distance: 200,
      groupId: 1,
      locale: "fi",
    },
  });

    fetchMore({
      variables: {
        latitude: 68.00,
        longitude: 23.00,
        distance: 600,
      },
    });
2

@teemu Can you share your MAP query?

1 Like
3

Slightly simplified versio

export const MAP = gql`
  query PlacesOnMap(
    $latitude: Float
    $longitude: Float
    $distance: Int
    $groupId: String
    $locale: String
  ) {
    journeysByLocation(
      location: {
        latitude: $latitude
        longitude: $longitude
        distance: $distance
      }
      where: { ownerGroup_eq: $groupId, locale_eq: $locale }
    ) {
      id
      name
      geoJSON
    }
    placesByLocation(
      location: {
        latitude: $latitude
        longitude: $longitude
        distance: $distance
      }
      where: { ownerGroup_eq: $groupId, locale_eq: $locale }
    ) {
      id
      name
      geoJSON
    }
  }
`;
1 Like
4

For documentation purposes the solution was following with Strapi GraphQL backend:

const client = new ApolloClient({
  uri: process.env.REACT_APP_GRAPHQL_API,
  cache: new InMemoryCache({
    typePolicies: {
      Query: {
        fields: {
          placesByLocation: {
            keyArgs: ["groupId", "locale"],
            merge(existing = [], incoming) {
              return uniqBy([...existing, ...incoming], "__ref");
            },
          },
          journeysByLocation: {
            keyArgs: ["groupId", "locale"],
            merge(existing = [], incoming) {
              return uniqBy([...existing, ...incoming], "__ref");
            },
          },
        },
      },
    },
  }),
});

fetchMore({
   variables: {
     latitude: 64,
     longitude: 23,
     distance: 500,
  },
})