DEV Community

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

Aryan J on May 13, 2020

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...

Read full post

ShinaBR2 • Jun 27 '20

Hi, this article looks nice for me. The only reason for using Apollo Client of mine is "caching", nothing else.
I have used graphql-request for my recently cloud functions and I like it's small.
But I'm using Gatsby, with a lot of issue related to SSR. Have you success with Vercel SWR in Gatsby? And how about the caching strategy between Apollo Client and Vercel SWR?
For me, I just need very simple caching strategy and setup also.
Thanks for nice article again :D

Aryan J • Jun 30 '20

Hey Shina!

SWR is the caching solution while graphql-request will take care of making the actual GraphQL requests.

I have no experience with using Vercel SWR in Gatsby but I have used it with Next.js (which also implements SSR).

ShinaBR2 • Jul 1 '20

Okay thanks, let me deep dive into and see <3 keep moving on.

Stuart Tett • Jun 10 '20

Where did you find out about this syntax:

const JOB_POST_BY_ID_QUERY = /* GraphQL */ `
  query paidJobPosts {
    jobPosts {
      id
    }
  }
`;

The examples in the graphql-request repo look like your apollo client version:

const query = /* GraphQL */ `
    query getMovie($title: String!) {
      Movie(title: $title) {
        releaseDate
        actors {
          name
        }
      }
    }`

Aryan J • Jun 11 '20

Hi Stuart! The two are the same (GraphQL syntax is the same no matter which client you use.

The getMovie example requires a parameter (title) which is why you see it written like that.

Is that what you were talking about?

Stuart Tett • Jun 11 '20

If that is the case, then I think there is a mistake in your code in the article, because they do not match. Or I'm not understanding, because I expected the two examples to be compare/contrast of the different clients.

Aryan J • Jun 11 '20

You're 100% right! As a compare/contract article, I should keep the code consistent. Thank you for pointing that out!

Phan Hong Duc • Jul 30 '20 • Edited

hi, I am learning Nextjs with Graphql. I have a problem when using useSWR to fetch data from Graphql api.const ALL_PRODUCTS2 = /* GraphQL */query allProducts($skip: String!, $take: String!) { allProducts(skip: $skip, take: $take) { id name } };`

const fetcher = (query: any, first: string, take: string) => request('localhost:3000/api/graphql', query, {first, take});

export default function Products() {
const {data} = useSWR([ALL_PRODUCTS2, '0', '3'], fetcher)
const loading: boolean = !data;
.......
}`

=> I get the error : ClientError: Variable "$skip" of required type "String!" was not provided.: {"response":{"errors":[{"message":"Variable \"$skip\" of required type \"String!\" was not provided.","locations":[{"line":2,"column":23}]}],"status":500},"request":{"query":"\n query allProducts($skip: String!, $take: String!) {\n allProducts(skip: $skip, take: $take) {\n id\n name\n }\n }\n","variables":{"first":"0","take":"3"}}}

Please help me to fix it. thank you!!!

I am trying migrate from apolo to swr, and follow your instruction but... With apolo, it works.

Thank you!

Naveen Bharathi • Apr 11 '21

Hi @hongducphan ,
You passed 'first' instead of 'skip' in the fetcher function. That is the problem. Renaming it should fix the issue.

query allProducts($skip: String!, $take: String!) {
                   ̅ ̅ ̅ ̅ ̅ 
  allProducts(skip: $skip, take: $take) {
    id
    name
  }
}

const fetcher = (query: any, first: string, take: string) => request('localhost:3000/api/graphql', query, { first, take });
                                                                                                             ̅ ̅ ̅ ̅ ̅

Daniel Berhane • Jul 1 '20 • Edited

Hi Aryan, excellent work. I am considering switching from Apollo to graphql-request as well. But graphql-request does not seem to have pagination support for relay style cursor. Do you have any idea on how to enable pagination for the above solution you are proposing?

oxcid • Dec 18 '20

Hey Aryan, thanks for the article! Quick question, for authentication, what's your recommended way of doing it? Do we have to use graphql-request? Or any other way of doing it? Does SWR have authentication?

Aryan J • May 17 '20

Hey! This is the first I've heard of it. Looks right up my alley. I'll try it in a future project!

Miguel Villarreal • Oct 7 '20

Thanks Aryan!! your post was very helpful!! i can believe how helpful swr & graphql-request are!

Michael • Aug 21 '20

Any way to implement GraphQL with useSWRInfinite?

Matheus Paiva • Jun 22 '20

Hello, Aryan. Great article, congratz! Do you make your server-side requests using SWR as well, or did you migrate only the client-side requests?

Aryan J • Jun 24 '20 • Edited

I make all GraphQL requests using graphql-request. SWR is only for caching (and only for the React client).

Dzmitry Sviryn • Nov 3 '20

I followed the same path (Apollo => SWR + graphql-request). It fits perfectly into my workflow. Also, it seems to be slightly quicker than Apollo.
Thank you for your article, Aryan.

Dzmitry Sviryn • Nov 3 '20

also, let me suggest:
const loading = !error && !data