I Migrated Away from Apollo Client to Vercel SWR and Prisma graphql-request...and You Can Too!

I Migrated Away from Apollo Client to Vercel SWR and Prisma graphql-request…and You Can Too!

GraphQL requests are simply POST requests made to your GraphQL endpoint. Why, oh why, does it need all this overhead of setting up an Apollo Client?

I was tired of setting up Apollo Client and it proved to be a huge headache when paired with Vercel Next.js’s Now. Something needed to give.

Enter Prisma’s graphql-request (for making the actual POST request) and Vercel SWR (for state caching). By remove Apollo Client, I manage to shave off 40 kB from my JavaScript build. I mean, look at this Next.js with Apollo hell I avoided!

OK, OK, you came here for examples of how to migrate. Here they are!

Basic Query without a Variable

With Apollo Client

1// with Apollo Client:
2import { gql, useQuery } from '@apollo/client';
3
4const PAID_JOBS_QUERY = gql`
5  query paidJobPosts {
6    jobPosts {
7      id
8    }
9  }
10`;
11const yourReactComponent = () => {
12  const { data, loading, error } = useQuery(PAID_JOBS_QUERY);
13};

With Vercel SWR and Prisma graphql-request

1// with SWR and graphql-request
2import { request } from 'graphql-request';
3import useSWR from 'swr';
4
5// the comment below gives us VSCode syntax highlighting!
6const PAID_JOBS_QUERY = /* GraphQL */ `
7  query paidJobPosts {
8    jobPosts {
9      id
10    }
11  }
12`;
13const yourReactComponent = () => {
14  const { data, error } = useSWR(PAID_JOBS_QUERY, (query) => request('/api', query));
15  const loading = !data;
16};

Basic Query with a Variable

With Apollo Client

1// with Apollo Client:
2import { gql, useQuery } from '@apollo/client';
3const JOB_POST_BY_ID_QUERY = gql`
4  query jobPostByIdQuery($id: String) {
5    jobPost(where: { id: $id }) {
6      id
7    }
8  }
9`;
10const yourReactComponent = ({ id }) => {
11  const { data, loading, error } = useQuery(JOB_POST_BY_ID_QUERY, { variables: { id } });
12};

With Vercel SWR and Prisma graphql-request

1// with SWR and graphql-request
2import { request } from 'graphql-request';
3import useSWR from 'swr';
4
5// the comment below gives us VSCode syntax highlighting!
6const JOB_POST_BY_ID_QUERY = /* GraphQL */ `
7  query paidJobPosts {
8    jobPosts {
9      id
10    }
11  }
12`;
13const yourReactComponent = ({ id }) => {
14  const { data, error } = useSWR([JOB_POST_BY_ID_QUERY, id], (query, id) =>
15    request('/api', query, { id })
16  );
17  const loading = !data;
18};

Basic Mutation with Variables

With Apollo Client

1// with Apollo Client:
2import { gql, useMutation } from '@apollo/client';
3
4const CREATE_JOB_POST_MUTATION = gql`
5  mutation createJobPostMutation($jobName: String!) {
6    createOneJobPost(jobName: $jobName) {
7      id
8    }
9  }
10`;
11const yourReactComponent = () => {
12  const [createJobPost] = useMutation(CREATE_JOB_POST_MUTATION);
13
14  const submitJobPost = async (jobName) => {
15    const { data } = await createJobPost({ variables: { jobName } });
16    // do something with job post
17  };
18};
19
20// with SWR and graphql-request
21import { request } from 'graphql-request';
22import useSWR from 'swr';
23
24const CREATE_JOB_POST_MUTATION = /* GraphQL */ `
25  mutation createJobPostMutation($jobName: String!) {
26    createOneJobPost(jobName: $jobName) {
27      id
28    }
29  }
30`;
31const createJobPost = (variables) => {
32  return request('/api', CREATE_JOB_POST_MUTATION, variables);
33};
34
35const yourReactComponent = ({ id }) => {
36  const submitJobPost = async (jobName) => {
37    const data = await createJobPost({ jobName });
38    // do something with data
39  };
40};

Mutation with Cache Refreshing

With Apollo Client

1// with Apollo Client:
2import { gql, useMutation, useQuery } from '@apollo/client';
3
4const ME_QUERY = gql`
5  query MeQuery {
6    me {
7      id
8    }
9  }
10`;
11const someReactComponentThatFetchesMe = () => {
12  const { data } = useQuery(ME_QUERY);
13};
14
15const SIGNIN_MUTATION = gql`
16  mutation signInMutation($email: String!, password: String!) {
17    signin(email: $email, password: $password) {
18      id
19    }
20  }
21`;
22const yourReactComponent = () => {
23  const [signin] = useMutation(SIGNIN_MUTATION);
24
25  const submit = (email, password) => {
26    signin({ variables: { email, password }, refetchQueries: [{ query: ME_QUERY }] });
27  };
28};

With Vercel SWR and Prisma graphql-request

1// with SWR and graphql-request
2import { request } from 'graphql-request';
3import useSWR from 'swr';
4
5const ME_QUERY = /* GraphQL */ `
6  query MeQuery {
7    me {
8      id
9    }
10  }
11`;
12const someReactComponentThatFetchesMe = () => {
13  const { data } = useSWR(ME_QUERY); // the key to this value in cache is the value fo ME_QUERY
14};
15
16const SIGNIN_MUTATION = /* GraphQL */ `
17  mutation signInMutation($email: String!, password: String!) {
18    signin(email: $email, password: $password) {
19      id
20    }
21  }
22`;
23const signIn = (variables) => {
24  return request('/api', SIGNIN_MUTATION, variables);
25};
26
27const yourReactComponent = () => {
28  const { mutate } = useSWR(ME_QUERY); // the mutate function will do the refetching for us
29
30  const submit = async (email, password) => {
31    await signin({ email, password });
32    mutate(); // call mutate here to refetch Me after signin
33  };
34};

I Migrated Away from Apollo Client to Vercel SWR and Prisma graphql-request...and You Can Too!