Authentication, Authorization, and Federation

npm install @apollo/client graphql

import { ApolloClient, InMemoryCache, createHttpLink } from '@apollo/client';
import { setContext } from '@apollo/client/link/context';

const httpLink = createHttpLink({ uri: 'http://localhost:4000/graphql' });

const authLink = setContext((_, { headers }) => {
  const token = localStorage.getItem('token');
  return {
    headers: {
      ...headers,
      authorization: token ? `Bearer ${token}` : '',
    }
  };
});

export const client = new ApolloClient({
  link: authLink.concat(httpLink),
  cache: new InMemoryCache(),
});

import { ApolloProvider } from '@apollo/client';
import { client } from './apolloClient';

function App() {
  return (
    
      
    
  );
}

import { useQuery, useMutation, gql } from '@apollo/client';

const GET_USERS = gql`
  query GetUsers {
    users { id name email }
  }
`;

const CREATE_USER = gql`
  mutation CreateUser($input: CreateUserInput!) {
    createUser(input: $input) { id name email }
  }
`;

function UserList() {
  const { loading, error, data } = useQuery(GET_USERS);
  const [createUser] = useMutation(CREATE_USER, {
    refetchQueries: [GET_USERS],  // refetch after mutation
  });

  if (loading) return 
Loading...
;
  if (error) return 
Error: {error.message}
;

  return (
    

      {data.users.map(u => 
{u.name}
)}
       createUser({ variables: { input: { name: 'New', email: '[email protected]' } } })}>
        Add User
      
    
  );
}