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';34const PAID_JOBS_QUERY = gql`5 query paidJobPosts {6 jobPosts {7 id8 }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-request2import { request } from 'graphql-request';3import useSWR from 'swr';45// the comment below gives us VSCode syntax highlighting!6const PAID_JOBS_QUERY = /* GraphQL */ `7 query paidJobPosts {8 jobPosts {9 id10 }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 id7 }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-request2import { request } from 'graphql-request';3import useSWR from 'swr';45// the comment below gives us VSCode syntax highlighting!6const JOB_POST_BY_ID_QUERY = /* GraphQL */ `7 query paidJobPosts {8 jobPosts {9 id10 }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';34const CREATE_JOB_POST_MUTATION = gql`5 mutation createJobPostMutation($jobName: String!) {6 createOneJobPost(jobName: $jobName) {7 id8 }9 }10`;11const yourReactComponent = () => {12 const [createJobPost] = useMutation(CREATE_JOB_POST_MUTATION);1314 const submitJobPost = async (jobName) => {15 const { data } = await createJobPost({ variables: { jobName } });16 // do something with job post17 };18};1920// with SWR and graphql-request21import { request } from 'graphql-request';22import useSWR from 'swr';2324const CREATE_JOB_POST_MUTATION = /* GraphQL */ `25 mutation createJobPostMutation($jobName: String!) {26 createOneJobPost(jobName: $jobName) {27 id28 }29 }30`;31const createJobPost = (variables) => {32 return request('/api', CREATE_JOB_POST_MUTATION, variables);33};3435const yourReactComponent = ({ id }) => {36 const submitJobPost = async (jobName) => {37 const data = await createJobPost({ jobName });38 // do something with data39 };40};
Mutation with Cache Refreshing
With Apollo Client
1// with Apollo Client:2import { gql, useMutation, useQuery } from '@apollo/client';34const ME_QUERY = gql`5 query MeQuery {6 me {7 id8 }9 }10`;11const someReactComponentThatFetchesMe = () => {12 const { data } = useQuery(ME_QUERY);13};1415const SIGNIN_MUTATION = gql`16 mutation signInMutation($email: String!, password: String!) {17 signin(email: $email, password: $password) {18 id19 }20 }21`;22const yourReactComponent = () => {23 const [signin] = useMutation(SIGNIN_MUTATION);2425 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-request2import { request } from 'graphql-request';3import useSWR from 'swr';45const ME_QUERY = /* GraphQL */ `6 query MeQuery {7 me {8 id9 }10 }11`;12const someReactComponentThatFetchesMe = () => {13 const { data } = useSWR(ME_QUERY); // the key to this value in cache is the value fo ME_QUERY14};1516const SIGNIN_MUTATION = /* GraphQL */ `17 mutation signInMutation($email: String!, password: String!) {18 signin(email: $email, password: $password) {19 id20 }21 }22`;23const signIn = (variables) => {24 return request('/api', SIGNIN_MUTATION, variables);25};2627const yourReactComponent = () => {28 const { mutate } = useSWR(ME_QUERY); // the mutate function will do the refetching for us2930 const submit = async (email, password) => {31 await signin({ email, password });32 mutate(); // call mutate here to refetch Me after signin33 };34};