Navigate back to the homepage

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

Aryan Jabbari
May 13th, 2020 · 1 min read

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};

📧 Join my email list and get notified about new content

Stay updated with all my blog posts and future randomness!

More articles from The WebDev Coach

Add Sentry to Vercel Next.js API Routes

Add Sentry to Vercel Next.js API Routes To add Sentry to Next.js, you can wrap your entire route in a try block and have the Sentry…

May 10th, 2020 · 1 min read

freeCodeCamp Pomodoro Clock 02: Lifting State Up and React Props

freeCodeCamp Pomodoro Clock 02: Lifting State Up and React Props This is the third installment of a tutorial series where I cover the…

February 10th, 2020 · 3 min read
© 2018–2020 The WebDev Coach
Link to $https://twitter.com/aryanjabbariLink to $https://www.youtube.com/c/thewebdevcoachLink to $https://dev.to/aryanjnycLink to $https://github.com/AryanJ-NYCLink to $https://www.linkedin.com/in/aryanjabbariLink to $https://www.instagram.com/thewebdevcoach/