Define client-side schema and resolvers with Apollo Angular

[MathisPct]

Hello there,

I'm developing an Angular application that uses Apollo Client to manage GraphQL queries and mutations. Due to the requirements of my application, I need to persist some GraphQL mutations when the internet is not available and resend them when the connection is re-established.

In order to implement this, I'm trying to define a client-side schema with resolvers in Apollo Angular, so I can store the mutations locally when the network is not available and resend them later. However, I'm facing some issues.

export const SAVE_MUTATION_OFFLINE = gql`
  mutation saveMutationOffline($safetyFactGenericSaveInput: SafetyFactGenericSaveInput!) {
    saveMutationOffline(safetyFactGenericSaveInput: $safetyFactGenericSaveInput) @client {
      id
      declarationDate
    }
  }
`;

And also a client-side schema with a resolver in my Apollo Client configuration:

export function createApollo(httpLink: HttpLink, configService: ConfigService): ApolloClientOptions<any> {
  const cache = new InMemoryCache();

  persistCacheSync({
    cache,
    storage: new LocalStorageWrapper(window.localStorage),
    maxSize: false
  });

  const retry = new RetryLink({
    // avec un delay initial de 2000 qui double à chaque retry et 15 retry,
    // on arrive à un temps de retry global maximum de 18h environ (sans tenir compte du jitter)
    delay: {
      initial: 2000,
      max: Infinity,
      jitter: true,
    },
    attempts: {
      max: 15,
      retryIf: (error, _operation) => !!error
    }
  })

  const http = httpLink.create({uri: configService.configuration.apiUrl + '/graphql'});

   [...]

  const link = from([
    persistenceLink,
    retry,
    offlineLink,
    http
  ])

  return {
    link: link,
    cache: cache,
    typeDefs: gql`
      extend type Mutation {
        saveMutationOffline(safetyFactGenericSaveInput: SafetyFactGenericSaveInput!): SaveMutationOffline!
      }

      type SaveMutationOffline {
        id: ID!
        declarationDate: String!
      }
    `,
    resolvers: {
      Mutation: {
        saveMutationOffline: (rootValue,
                              args: {
                                safetyFactGenericSaveInput: SafetyFactGenericSaveInput
                              },
                              context) => {
          cache.writeQuery( {
            id: context.id,
            query: rootValue,
            variables: args,
            data: {
              safetyFactInput: args
            },
          });
          console.log("resolver", "cache")
          return {
            id: context.id,
            declarationDate: args.safetyFactGenericSaveInput.declarationDate
          }
        }
      }
    }
  };
}

@NgModule({
  exports: [ApolloModule],
  providers: [
    {
      provide: APOLLO_OPTIONS,
      useFactory: createApollo,
      deps: [HttpLink, ConfigService],
    },
  ],
})
export class GraphQLModule {
}

It is possible to directly mutate with client side operation or does we must to use writeQuery method's of cache cache.writeQuery({...}) ?

I would appreciate any help or direction :)

[MathisPct]

I just see that local-only mutation is just deprecated since 3.0 version's of apollo-client :(
Instead of local-only mutation, they suggest to use writeQuery or reactive variables

https://www.apollographql.com/docs/react/local-state/managing-state-with-field-policies/#storing-and-mutations:~:text=It%27s%20tempting%20to,manage%20local%20state