diff --git a/components/home/Recent.tsx b/components/home/Recent.tsx
index 8177a185..bf83cb5c 100644
--- a/components/home/Recent.tsx
+++ b/components/home/Recent.tsx
@@ -24,7 +24,7 @@ export const QUERY = gql`
 
 function Recent() {
   const { loading, error, data } = useQuery(QUERY, {
-    sort: 'sort=metadata_created%20desc',
+    variables: { sort: 'metadata_created desc' },
     // Setting this value to true will make the component rerender when
     // the "networkStatus" changes, so we are able to know if it is fetching
     // more data
diff --git a/pages/index.tsx b/pages/index.tsx
index 61f420a0..dfb9c05c 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -40,6 +40,9 @@ export const getServerSideProps: GetServerSideProps = async (context) => {
 
   await apolloClient.query({
     query: QUERY,
+    variables: {
+      sort: 'metadata_created desc',
+    },
   });
 
   return {