How to use apollo-client-preset - 10 common examples

uri: config.webSocketEndpoint,
    });
    // Combine the links in a way that splits based on the operation
    const link = split(
      ({ query }) => {
        const definition = getMainDefinition(query);
        return (
          definition.kind === "OperationDefinition" &&
          definition.operation === "subscription"
        );
      },
      webSocketLink,
      httpLink,
    );
    // Create a client with the combined links
    return new ApolloClient({
      cache: new InMemoryCache(),
      link,
    });
  }

})

const link = split(
  // split based on operation type
  ({ query }) => {
    const { kind, operation } = getMainDefinition(query)
    return kind === 'OperationDefinition' && operation === 'subscription'
  },
  wsLink,
  httpLinkAuth,
)

// apollo client setup
const client = new ApolloClient({
  link: ApolloLink.from([link]),
  cache: new InMemoryCache(),
  connectToDevTools: true,
})

const token = localStorage.getItem(AUTH_TOKEN)

ReactDOM.render(
  
    
  ,
  document.getElementById('root'),
)

});
    // Combine the links in a way that splits based on the operation
    const link = split(
      ({ query }) => {
        const definition = getMainDefinition(query);
        return (
          definition.kind === "OperationDefinition" &&
          definition.operation === "subscription"
        );
      },
      webSocketLink,
      httpLink,
    );
    // Create a client with the combined links
    return new ApolloClient({
      cache: new InMemoryCache(),
      link,
    });
  }

private async createClient(user: User, path: string) {
    // Create a configuration from the user
    const config = await GraphQLConfig.create(user, path, null, true);
    // Construct an HTTP link that knows how to authenticate against ROS
    const httpLink = concat(
      config.authLink,
      new HttpLink({ uri: config.httpEndpoint }),
    );
    // Construct a link based on WebSocket that can be used for real-time subscriptions
    const webSocketLink = new WebSocketLink({
      options: {
        connectionParams: config.connectionParams,
      },
      uri: config.webSocketEndpoint,
    });
    // Combine the links in a way that splits based on the operation
    const link = split(
      ({ query }) => {
        const definition = getMainDefinition(query);
        return (
          definition.kind === "OperationDefinition" &&
          definition.operation === "subscription"
        );

})

const httpLink = createHttpLink({
  uri: GRAPHQL_URI,
})

const authLink = setContext(async (_, { headers }) => {
  return {
    headers: {
      ...headers,
      Authorization: await AsyncStorage.getItem('token'),
    },
  }
})

const link = split(
  ({ query }) => {
    // @ts-ignore
    const { kind, operation } = getMainDefinition(query)
    return kind === 'OperationDefinition' && operation === 'subscription'
  },
  wsLink,
  httpLink,
)

const cache = new InMemoryCache()

const stateLink = withClientState({
  cache,
  resolvers: {
    Mutation: {
      // @ts-ignore

cachedToken = token;

        // return the headers to the context so httpLink can read them
        resolve({
          headers: {
            ...headers,
            authorization: token ? `Bearer ${token}` : null,
          },
        });
      }),
  );

  const httpLinkWithAuth = authMiddleware.concat(httpLink);

  const link = split(
    ({ query }) => {
      const { kind, operation } = getMainDefinition(query);
      return kind === 'OperationDefinition' && operation === 'subscription';
    },
    wsLink,
    httpLinkWithAuth,
  );

  const client = new ApolloClient({
    link,
    cache: new InMemoryCache({ dataIdFromObject: o => o.id }),
    connectToDevTools: true,
  });

  return client;
}

// Create a configuration from the user
    const config = await GraphQLConfig.create(user, path, null, true);
    // Construct an HTTP link that knows how to authenticate against ROS
    const httpLink = concat(
      config.authLink,
      new HttpLink({ uri: config.httpEndpoint }),
    );
    // Construct a link based on WebSocket that can be used for real-time subscriptions
    const webSocketLink = new WebSocketLink({
      options: {
        connectionParams: config.connectionParams,
      },
      uri: config.webSocketEndpoint,
    });
    // Combine the links in a way that splits based on the operation
    const link = split(
      ({ query }) => {
        const definition = getMainDefinition(query);
        return (
          definition.kind === "OperationDefinition" &&
          definition.operation === "subscription"
        );
      },
      webSocketLink,
      httpLink,
    );
    // Create a client with the combined links
    return new ApolloClient({
      cache: new InMemoryCache(),
      link,
    });
  }

if (error.message === 'Network request failed') {
          // if (_operation.operationName === 'createPost') {
          return true;
          // }
        }
        return false;
      }
    }
  });

  const httpLinkWithAuth = authMiddleware.concat(httpLink);
  const wsLinkWithAuth = authMiddleware.concat(wsLink);

  const link = concat(
    retryLink,
    split(
      ({ query }) => {
        const { kind, operation } = getMainDefinition(query);
        return kind === 'OperationDefinition' && operation === 'subscription';
      },
      wsLinkWithAuth,
      httpLinkWithAuth
    )
  );

  const defaultOptions = {
    watchQuery: {
      fetchPolicy: 'cache-and-network',
      errorPolicy: 'all'
    },
    query: {
      fetchPolicy: 'cache-and-network',

private async createClient(user: User, path: string) {
    // Create a configuration from the user
    const config = await GraphQLConfig.create(user, path, null, true);
    // Construct an HTTP link that knows how to authenticate against ROS
    const httpLink = concat(
      config.authLink,
      new HttpLink({ uri: config.httpEndpoint }),
    );
    // Construct a link based on WebSocket that can be used for real-time subscriptions
    const webSocketLink = new WebSocketLink({
      options: {
        connectionParams: config.connectionParams,
      },
      uri: config.webSocketEndpoint,
    });
    // Combine the links in a way that splits based on the operation
    const link = split(
      ({ query }) => {
        const definition = getMainDefinition(query);
        return (
          definition.kind === "OperationDefinition" &&

max: Infinity,
      retryIf: (error, _operation) => {
        if (error.message === 'Network request failed') {
          // if (_operation.operationName === 'createPost') {
          return true;
          // }
        }
        return false;
      }
    }
  });

  const httpLinkWithAuth = authMiddleware.concat(httpLink);
  const wsLinkWithAuth = authMiddleware.concat(wsLink);

  const link = concat(
    retryLink,
    split(
      ({ query }) => {
        const { kind, operation } = getMainDefinition(query);
        return kind === 'OperationDefinition' && operation === 'subscription';
      },
      wsLinkWithAuth,
      httpLinkWithAuth
    )
  );

  const defaultOptions = {
    watchQuery: {
      fetchPolicy: 'cache-and-network',
      errorPolicy: 'all'
    },