babel-plugin-relay
react-relay
relay-compiler
@graphql-inspector/cli
relay-runtime
vite-plugin-relay

yarn add graphql@^16.10.0

getSchema
relay

find ./app -type d -name "__generated__" | xargs rm -r
find ./views -type d -name "__generated__" | xargs rm -r
git rm -r --cached app/**/__generated__ views/**/__generated__

yarn add @fasstech/[email protected]

{
  "scripts": {
    "build:views": "oip-tools views build --config ./viewsConfig --extFileBackend mjs --gql-client apollo --gen-test-files false"
  }
}

yarn add --dev @apollo/[email protected]

import { ApolloLink, HttpLink, from, split } from '@apollo/client';
import { RetryLink } from '@apollo/client/link/retry';
import { onError } from '@apollo/client/link/error';
import { getMainDefinition } from '@apollo/client/utilities';
import { GraphQLWsLink } from '@apollo/client/link/subscriptions';
import { removeTypenameFromVariables } from '@apollo/client/link/remove-typename';
import { setContext } from '@apollo/client/link/context';
import { createClient } from 'graphql-ws';
import Tokens from '../Tokens.js';

export const createLink = (projectId) => {
  const errorLink = onError(async ({ graphQLErrors, networkError }) => {
    if (graphQLErrors) {
      graphQLErrors.forEach(({ message, locations, path }) =>
        console.log(`[GraphQL error]: Message: ${message}, Location: ${locations}, Path: ${path}`)
      );
    }

    if (networkError) {
      console.log(`[Network error]: ${networkError}`);
    }
  });

  const retryLink = new RetryLink({
    delay: {
      initial: 300,
      max: Infinity,
      jitter: true
    },
    attempts: {
      max: 3,
      retryIf: async (error, _operation) => {
        // on 401 error, try to refresh access token and retry operation
        if (error.statusCode === 401) {
          await Tokens.getAccessToken(true);
          return true;
        }

        return false;
      }
    }
  });

  const authLink = setContext(async (_, { headers }) => {
    const accessToken = await Tokens.getAccessToken();

    return { headers: { ...headers, Authorization: `Bearer ${accessToken}` } };
  });

  const splitLink = split(
    ({ query }) => {
      const definition = getMainDefinition(query);

      return definition.kind === 'OperationDefinition' && definition.operation === 'subscription';
    },
    new GraphQLWsLink(
      createClient({
        url: async () => {
          const response = await fetch('/graphqlwsurl');
          const { url } = await response.json();

          return url;
        }
      })
    ),
    new HttpLink({ uri: '/graphql' })
  );

  return from([
    new ApolloLink((operation, forward) => {
      operation.setContext({ headers: { 'fasst-oav-project-id': projectId } });

      return forward(operation);
    }),
    errorLink,
    retryLink,
    authLink,
    removeTypenameFromVariables(),
    splitLink
  ]);
};

import { RelayEnvironmentProvider } from 'react-relay';
import GQLEnvironment from '@@appGraphQL/Environment';

import { ApolloClient, ApolloProvider, InMemoryCache } from '@apollo/client';
import { createLink } from './_graphql';

const environment = await GQLEnvironment();

const App = ({ environment }) => { ... }

<App environment={environment} />

useEffect(() => {
  GQLEnvironment.projectId = data?.projectId;
}, [data?.projectId]);

const gqlClient = new ApolloClient({
  cache: new InMemoryCache(),
  defaultOptions: { watchQuery: { fetchPolicy: 'network-only' } },
  link: createLink(data.projectId)
});

<RelayEnvironmentProvider environment={environment}>
  <App />
</RelayEnvironmentProvider>

<ApolloProvider client={gqlClient}>
  <App />
</ApolloProvider>

export * from './mutations';
export * from './queries';
export * from './link';

import { graphql } from 'react-relay';

const QProcessQuery = graphql`
  query QProcessQuery {
    process { ... }
  }
`;

export default { query: QProcessQuery };

import { gql } from '@apollo/client';

export const QProcessQuery = gql`
  query QProcessQuery {
    process { ... }
  }
`;

import { commitMutation, graphql } from 'react-relay';

import { gql } from '@apollo/client';

export const ProcessActionMutation = gql`
  mutation ProcessActionMutation($viewId: ID!, $action: ID!, $object: ProcessObjectInput) {
    processAction(viewId: $viewId, action: $action, object: $object) {
      # ...
    }
  }
`;

// Query
const client = useApolloClient();
const { data } = await client.query({ query: QProcessQuery });

// Mutation
const { data } = await client.mutate({
  mutation: ProcessActionMutation,
  variables: { viewId, action, object }
});

// before with Relay
export const useFetchQuery = ({
  gqlQuery,
  args,
  verbose = false,
  skip = false,
  initialValue = {},
  dataProp
}) => {
  // ...
  return {
    isLoaded,
    errorMsg,
    data,
    dataProp,
    fetching,
    isFetching,
    reFetch
  };
}

// now with Apollo
export const useFetchQuery = ({
  gqlQuery,
  args,
  // verbose = false, // removed
  skip = false,
  initialValue = {},
  dataProp
}) => {
  // ...
  return {
    error, // added
    isLoaded,
    errorMsg, // different format than previously
    data,
    dataProp,
    // fetching, // removed
    isFetching,
    reFetch
  };
}

// before with Relay
export const useCommitMutation = (mutation, { dataProp }) => {
  // ...
  return {
    onFormSubmit,
    isFetching
  };
}

// now with Apollo
export const useCommitMutation = (mutation, { dataProp }) => {
  // ...
  return {
    onFormSubmit,
    isFetching,
    called // added
  };
}

// before with Relay
export const useTaskUpdateSubscription = (variables) => {
  // ...
  return { 
    outputValue, 
    errorValue 
  };
}

// now with Apollo
export const useSubscription = (subscription, variables) => {
  // ...
  return {
    data, // outputValue
    error, // errorValue
    loading // added
  };
}

import { useState } from 'react';
import withProcess from '@@app/withProcess';

// before with Relay > import
import { useTaskUpdateSubscription } from '@@viewCommonHooks/useTaskUpdateSubscription';

// now with Apollo > import
import { useSubscription } from '@@viewCommonHooks/useSubscription';
import { TaskUpdateSubscription } from '@@views/_common/graphql/subscriptions/TaskUpdateSubscription';

const MyComponent = ({ context, processHandlers }) => {
  // before with Relay > hook implementation
  const { outputValue, errorValue } = useTaskUpdateSubscription({
    taskName: 'magicTask',
    projectId: context.projectId,
  });

  // now with Apollo > hook implementation
  const { data: outputValue, error: errorValue } = useSubscription({
    taskName: 'magicTask',
    projectId: context.projectId,
  }, TaskUpdateSubscription);

  return (
    <div>
      ...
    </div>
  );
};

export default withProcess(MyComponent);