¿Qué es GraphQL y React Apollo? Inicializando React Apollo Client y primer HoC

Actualización a Dic-2020

Ahora se importa una única dependencia de Apollo y GraphQL

npm install @apollo/client graphql

Luego en el index principal

//DEPENDENCIES
import React from "react";
import ReactDOM from "react-dom";
import { ApolloClient, ApolloProvider, InMemoryCache } from "@apollo/client";

//APP
import App from "./App";

const client = new ApolloClient({
  uri: "https://petgram-server-clgg.vercel.app/graphql",
  cache: new InMemoryCache(),
});

ReactDOM.render(
  <ApolloProvider client={client}>
    <App />
  </ApolloProvider>,

  document.getElementById("App")
);

Y en ListOfPhotocards

//DEPENDENCIES
import React from "react";
import { useQuery, gql } from "@apollo/client";

//COMPONENTS
import { PhotoCard } from "../PhotoCard";

const whitPhotos = gql`
  query getPhotos {
    photos {
      id
      categoryId
      src
      likes
      userId
      liked
    }
  }
`;

export const ListOfPhotoCards = () => {
  const { loading, error, data } = useQuery(whitPhotos);

  if (error) {
    return <h2>Internal Server Error</h2>;
  }
  if (loading) {
    return <h2>Loading...</h2>;
  }

  return (
    <ul>
      {data.photos.map((photo) => (
        <PhotoCard key={photo.id} {...photo} />
      ))}
    </ul>
  );
};

😉

Para aquellos que quieran utilizar la nueva característica de Apollo Client utilizando hooks quedaría así:

npm install apollo-boost @apollo/react-hooks graphql

// Dependencies
import React from 'react'
import ReactDOM from 'react-dom'
import ApolloClient from 'apollo-boost'
import { ApolloProvider } from '@apollo/react-hooks'

// Components
import { App } from './App'

const client = new ApolloClient({
  uri: 'https://petgram-server-jrmfsd-okxluew9o.now.sh/graphql'
})

ReactDOM.render(
  // eslint-disable-next-line react/jsx-filename-extension
  <ApolloProvider client={client}>
    <App />
  </ApolloProvider>,
  document.getElementById('app')
)

import React from 'react'

import { useQuery } from '@apollo/react-hooks'
import { gql } from 'apollo-boost'
import { PhotoCard } from '../PhotoCard'
import { DotSpinner } from '../Spinner'

const getPhotos = gql`
  query getPhotos {
    photos {
      id
      categoryId
      src
      likes
      userId
      liked
    }
  }
`

export const ListOfPhotoCards = () => {
  const { loading, error, data } = useQuery(getPhotos)

  if (loading) return <DotSpinner />
  if (error) return <p>Error</p>

  return (
    <ul>
      {data.photos.map((photoCard, id) => (
        <PhotoCard key={id} {...photoCard} />
      ))}
    </ul>
  )
}

Al dia de hoy 7-12-2021 ahora solo es necesario instalar estas dependencias:

npm install @apollo/client graphql

Estas estan en la Documentación oficial de Apollo, para importar las dependencias se hace así

import {
  ApolloClient,
  InMemoryCache,
  ApolloProvider
} from '@apollo/client'

para inicializar el cliente es así

const client = new ApolloClient({
  uri: 'https://48p1r2roz4.sse.codesandbox.io',
  cache: new InMemoryCache()
})

y para conectar el cliente con React se hace de la siguiente forma

ReactDOM.render(
  <ApolloProvider client={client}>
    <App />
  </ApolloProvider>,
  document.getElementById('app')
)

Como sabrán el curso está desactualizado con algunas cosas, así que les dejo la solución que yo implementé.

1. Instalen las dependencias de @apollo/client
2. En el index.js (el global) importan todo desde @apollo/client así :

import React from 'react'
import ReactDOM from 'react-dom'
import { ApolloProvider, ApolloClient, InMemoryCache } from '@apollo/client' // ASÍ
import { App } from './App'

const client = new ApolloClient({
  uri: 'TU URL DE VERCEL',
  cache: new InMemoryCache()
})

ReactDOM.render(
  <ApolloProvider client={client}>
    <App />
  </ApolloProvider>, document.getElementById('app'))

1. En el componente ListOfPhotoCards.js importan useQuery y gql de @apollo/client y el resto del código es entendible:

import React from 'react'
import { useQuery, gql } from '@apollo/client'
import { PhotoCard } from '../PhotoCard'

const ANIMALS_QUERY = gql`
  query getPhotos {
      photos {
      id
      categoryId
      src
      likes
      userId
      liked
      }
  }
`

export const ListOfPhotoCards = () => {
  const { data, loading, error } = useQuery(ANIMALS_QUERY)  // destructuras la data y el estado de loading y error 
  if (loading) return 'Loading...' // manejas el estado para que no te saque error mientras hace el fetch
  if (error) return <pre>{error.message}</pre>
  return (
    <ul>
      {data.photos.map(photo => <PhotoCard key={photo.id} {...photo} />)}
    </ul>
  )
}

1. Y eso es todo amigos, lo vi en https://www.freecodecamp.org/news/5-ways-to-fetch-data-react-graphql/

2. Recuerden que las tecnologías cambian todos los días.

Hasta ahora hay un pequeño cambio al importar librerías

Para la instalacion

npm install apollo-boost @apollo/react-hooks graphql

index.js

import { ApolloProvider } from '@apollo/react-hooks';

<ApolloProvider client={client}><App /></ApolloProvider>

hacer la query

useQuery(gql(``))

Ahora hay una nueva forma de hacerlo y mucho más fácil, veamos:
Primero debemos instalar dos dependencias:
npm install @apollo/client graphql
@apollo/client contiene todo lo que se necesita para configurar ApolloClient y más.
@graphql proporciona la lógica para analizar consultas GraphQL.
.
Ahora en nuestro index.js realizamos lo siguiente:

import React from 'react';
import ReactDOM from 'react-dom';
import { ApolloClient, ApolloProvider, InMemoryCache } from '@apollo/client';

import App from './App';

const client = new ApolloClient({
  uri: 'https://petsgram-server-mappedev-339gmifsh.vercel.app/graphql',
  cache: new InMemoryCache(),
});

ReactDOM.render(
  <ApolloProvider client={client}>
    <App />
  </ApolloProvider>,
  document.getElementById('app')
);

InMemoryCache nos permite guardar los datos solicitados en cache.
.
Por último realizamos la query en nuestro componente y renderizamos cada elemento de la data obtenida:

import React from 'react';

import PhotoCard from '../PhotoCard';

import { gql, useQuery } from '@apollo/client';

const GET_PHOTOS = gql`
  query getPhotos {
    photos {
      id
      categoryId
      src
      likes
      userId
      liked
    }
  }
`;

export default function ListOfPhotoCards() {
  const { loading, error, data } = useQuery(GET_PHOTOS);

  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error!!!</p>;

  return (
    <ul>
      {data.photos.map((photo) => (
        <li key={photo.id}>
          <PhotoCard id={photo.id} likes={photo.likes} src={photo.src} />
        </li>
      ))}
    </ul>
  );
}

.
Espero que les haya servidor, si desean más información pueden revisar la documentación que está más detallada.

Esta es la nueva forma de inicial el client de Apollo

import React from 'react'
import ReactDom from 'react-dom'
import { ApolloClient, HttpLink, InMemoryCache } from 'apollo-boost'
import { ApolloProvider } from 'react-apollo'

import { App } from './App'

const cache = new InMemoryCache()

const link = new HttpLink({
    uri: 'https://petgram-server-jcamacaro.camacaro.now.sh/graphql'
})

const client = new ApolloClient({
    cache,
    link
})

// ReactDom.render(<App/>, document.getElementById('app'))

ReactDom.render(
    <ApolloProvider client={client}>
        <App/>
    </ApolloProvider>, 
document.getElementById('app'))

Esta increible 😱, ya tengo un poco de experiencia en react y haber hecho el proyecto por sin antes tomar el curso, puff quedaria menos entendible, una carpeta con todos mi componentes, y sin crear customHooks. Realmente estoy muy contento de todas las buenas prácticas que he aprendido, el código está súper limpio, fácil de entender 😃. También aprendí a integrar GraphQL que es una tecnología que no sabía como integrar a react sin gatsby 👍

Hola 👋
A los que van justos => mi consejo es instalar las dependencias igual que el profe para seguir avanzando (a pesar que están desactualizadas).
En cuanto a la uri de cliente, a mi me sirvió: https://petgram-server-clgg.vercel.app/graphql
Un saludo

Sin duda, prefiero acceder a los datos con render props, o mejor aun, con los Hooks de graphql!!! https://blog.apollographql.com/apollo-client-now-with-react-hooks-676d116eeae2

3:48 es uri no url, cuidado con eso si estan haciendolo manual y no copiandolo porque les da un error!

Ahora todo esta en @apollo/client

npm install @apollo/client graphql

import React from "react";
import ReactDOM from "react-dom";
import { App } from "./App";
import { ApolloProvider, ApolloClient, InMemoryCache } from '@apollo/client';

const client = new ApolloClient({
    uri: "https://petgram-server-9kncf4ueo-gvargas.vercel.app/graphql",
    cache: new InMemoryCache()
});

ReactDOM.render(
    <ApolloProvider client={client}>
        <App />
    </ApolloProvider>,
    document.getElementById("app")
);

import React from 'react'
import { useQuery, gql } from '@apollo/client';
import { PhotoCard } from '../PhotoCard'

const LIST_OF_PHOTO_CARDS = gql`
  query getPhotos {
    photos {
      id
      categoryId
      src
      likes
      userId
      liked
    }
  }
`

export const ListOfPhotoCards = () => {
  const  { loading, error, data } = useQuery(LIST_OF_PHOTO_CARDS);
  console.log(`🚀 ~ file: index.js ~ line 20 ~ ListOfPhotoCards ~ data`, data)


  return (
    <ul>
      {[1, 2, 3, 4, 5, 6, 7].map(id => <PhotoCard key={id} id={id} />)}
    </ul>
  )
}

ListOfPhotoCards usando @apollo/client

import React from 'react'
import { useQuery, gql } from '@apollo/client'
import { PhotoCard } from '../PhotoCard'

const whitPhotos = gql`
  query getPhotos {
    photos {
      id
      categoryId
      src
      likes
      userId
      liked
    }
  }
`

export const ListOfPhotoCards = () => {
  const { loading, error, data } = useQuery(whitPhotos)

  if (error) {
    return <h2>Internal Server Error</h2>
  }
  if (loading) {
    return <h2>Loading...</h2>
  }

  return (
    <ul>
      {data.photos.map((photo) => (
        <PhotoCard key={photo.id} {...photo} />
      ))}
    </ul>
  )
}

es posible envolver redux dentro de un apollo provider?

💚

import { useQuery, gql } from '@apollo/client'
import { PhotoCard } from '../PhotoCard'
import { Skeleton } from '@material-ui/lab'

const withPhotos = gql`
  query getPhotos {
    photos {
      id
      categoryId
      src
      likes
      userId
      liked
    }
  }
`

export const ListOfPhotoCards = () => {
  const { loading, error, data } = useQuery(withPhotos)

  if (error) return <h2>Internal Server Error...</h2>
  return (
    <ul>
      {loading ? (
        [1, 2, 3].map(idx =>
          <Skeleton
            width={`100%`}
            height={262}
            animation='wave'
            key={idx}
          />
        )
      ) : (
        data.photos.map(photo => <PhotoCard key={photo.id} {...photo} />)
      )}
    </ul>
  )
}

Si quieren saber más sobre HoC: https://es.reactjs.org/docs/higher-order-components.html

Por si acaso hoy 2-Feb-2023 tuve que modificar el componente para que muestre los cards:

import React from 'react'
import PhotoCard from '../PhotoCard/PhotoCard'

import { useQuery, gql } from '@apollo/client';

const withPhotos = gql`
  query getPhotos {
    photos {
      id
      categoryId
      src
      likes
      userId
      liked
    }
  }
`
const ListOfPhotoCards = () => {
  const { loading, error, data } = useQuery(withPhotos);
  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error : {error.message}</p>;
  
  return (
    <ul>
         {data.photos.map(photo => <PhotoCard key={photo.id} {...photo}/>)
        }
    </ul>
  )
}
  
export default ListOfPhotoCards

actualización a 2022, algunas coas han cambiado, para instalar, las dependencias tal cual el profesor se debe hacer así ,

npm i graphql --legacy-peer-deps
 npm i react-apollo --legacy-peer-deps 

el código de index.js quedaría así

import React from "react";
import reactDom from "react-dom";
import ApolloClient from "apollo-boost";
import { ApolloProvider } from "react-apollo";
import { InMemoryCache } from "@apollo/client";
import App from "./App";

const client = new ApolloClient({
  uri: "https://petgram-server-carlos-carlosdev88.vercel.app/graphql",
  cache: new InMemoryCache(),
});

reactDom.render(
  <ApolloProvider client={client}>
    <App />
  </ApolloProvider>,
  document.getElementById("root")
);

export default index;

Si estan usando la ultima version de Apollo posiblemente les de error asi que les dejo de la forma en que hice usanado lo de la ultima version de apollo

import React from 'react';
import { PhotoCard } from '../PhotoCard';
import { gql, useQuery } from '@apollo/client';

export const ListOfPhotoCards = () => {

  const { loading, error, data } = useQuery(whithPhotos);

  if (loading) return 'Loading...';
  if (error) return `Error! ${error.message}`;

  const photos = data.photos;

  return (
    <ul>
      {photos.map(photo => <PhotoCard key={photo.id} {...photo} />)}
    </ul>
  )
}

const whithPhotos = gql`
query getPhotos{
  photos{
    id
    categoryId
    src
    likes
    userId
    liked
  }
}
`;

Hola, tengo problemas de CORS en Now. Alguien puede ayudarme?

Hagan un curso de como usar NestJS para NodeJS, me encantaría hacer el backend de este curso en ese framework:

https://nestjs.com/

Y qué pasa si se está usando redux también envuelve a app, entonces me imagino que su high order component es apollo > redux > app ?? 😕

Esta clase deberia estar en Youtube ❤️!

Deberian darle mantenimiento al curso , la uri que brindan esta caida y nosotros pagamos para hacer el curso, Platzi debes darnos una solucion

[email protected], atención al escribir código!!
Siguiendo el curso confundí boost con boots 😱

Mucho cuidado aquí!

Deben de importar Apollo Client como

import ApolloClient from 'apollo-boost'

Y no se manera nombrada como muchos comentarios dicen mas abajo:

import { ApolloClient } from'apollo-boost'

Si lo hacen así podrán seguir el curso con el mismo código, de lo contrario tendrán problemas mas adelante, vengo del futuro, el profesor resolvió una duda similar hace tiempo aqui

Gracias profe, otra pregunta es mejor usar graphql en la capa de React JS con Apollo o en la capa de Express con express-graphql y cual es la diferencia de performance entre ellas??

Me salió este error en la inicialización del cliente.
Dice que debo especificar el link y el caché, pero Miguel Ángel sólo especificó el link.

En la documentación encontré esta forma de inicializar el cliente
instalé dos nuevas dependencias apollo-cache-inmemory y apollo-link-http

npm i apollo-cache-inmemory apollo-link-http -S

Y así las usé

import React from 'react'
import ReactDOM from 'react-dom'
import { ApolloClient } from 'apollo-boost'
import { ApolloProvider } from 'react-apollo'
import { InMemoryCache } from 'apollo-cache-inmemory'
import { HttpLink } from 'apollo-link-http'
import { App } from './App'

const cache = new InMemoryCache()
const link = new HttpLink({
  uri: 'https://petgram-api-spark.now.sh/graphql'
})

const client = new ApolloClient({
  cache,
  link
})

Si alguien sabe si no es necesario instalar las dos nuevas dependencias me avisa porfa.
O si hay otra forma más sencilla

Al día de hoy la documentación recomenienda usar @apollo/react-hooks
https://www.apollographql.com/docs/react/get-started/#connect-your-client-to-react

import React from 'react';
import { render } from 'react-dom';

import { ApolloProvider } from '@apollo/react-hooks';

const App = () => (
  <ApolloProvider client={client}>
    <div>
      <h2>My first Apollo app 🚀</h2>
    </div>
  </ApolloProvider>
);

render(<App />, document.getElementById('root'));

Actualización Mar-2023
Si queremos seguir utilizando el HOC como en el ejemplo, pero con las librerías actuales, aunque Apollo mismo dice que está deprecado. Por lo demás, en otros comentarios hay aportes de otros compañeros que lo resuelven con ejemplos no deprecados.

npm install @apollo/client graphql

Y ahora importamos lo necesario de los nuevos lugares y continuamos manteniendo el objetivo de la clase, que creo que era trabajar con el HOC de Apollo.

import React from 'react'
import { gql } from '@apollo/client'
import { graphql } from '@apollo/client/react/hoc'
import { PhotoCard } from '../PhotoCard'

const withPhotos = graphql(gql`
  query getPhotos {
  photos {
  id
  categoryId
  src
  likes
  userId
  liked
  }
}`)

const ListOfPhotocardsComponent = ({ data: { photos = [] } } = {}) => {
  return (
    <ul>
      {
            photos.map(photo => <PhotoCard key={photos.id} {...photo} />)
            }
    </ul>
  )
}

// Higer order component

export const ListOfPhotocards = withPhotos(ListOfPhotocardsComponent)

IMPORTANTE:
GraphQL no sustituye a REST. Porque GraphQL es un lenguaje y REACT API es una arquitectura… además:

GraphQL | REST API
Es un lenguaje | Es una arquitectura
Un sólo endpoint | Múltiples endpoints para los diferentes objetos
Fetching justo | Overfetching y Underfetching (recupera mucha o poca información)
Conexión a otras APIs | Conexión directa a la base de datos

Me tiene intrigada esa medalla que tiene el profe en su IDE ajajja #LOL

No entiendo como se llega a esta dirección en index.js, entiendo que cada uno debe tener la suya personal, pero como se genera ese /graphql con los datos? No se si me explico, yo tengo mi link de vercel, pero simplemente agregandole /graphql al final no me funciona

const client = new ApolloClient({
uri: “>>esta<<”,
});

Genial

Si revias las dependencias react-apollo y apollo-boost puedes sustituiras instalando solo npm i @apollo/client

las importaciones y el client en index.js seria de la siguiente forma:

import { ApolloClient, ApolloProvider, InMemoryCache } from '@apollo/client'

const client = new ApolloClient({
  uri: 'https://petgram-server.midudev.now.sh/graphql',
  cache: new InMemoryCache(),
})

y las importaciones de ListOfPhotoCards serian de la siguiente manera:

import { graphql } from '@apollo/client/react/hoc';
import { gql } from '@apollo/client';

Que tanto sentido tendria usar GraphQL si yo soy el que construye tambien la API REST ?

Yo lo hice de la siguiente manera, vi que en la documentacion https://www.apollographql.com/docs/react/get-started/
se podia extraer todo lo necesario desde un import sin tener que usar uno distinto para el client como para el provider ademas de tener los hooks

import React from 'react'
import { render } from 'react-dom'
import { ApolloClient, ApolloProvider, InMemoryCache } from '@apollo/client'
import App from './App'

const client = new ApolloClient({
  uri: 'https://petgram-server-anthony-3vrjckvsb.vercel.app/graphql',
  cache: new InMemoryCache()
})

render(
  <ApolloProvider client={client}>
    <App />
  </ApolloProvider>,
  document.getElementById('app')
)

me aparece este error:

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined.

A alguien le ocurre? cómo puedo resolverlo? estoy buscando en stackoverflow pero no he tenido suerte con las respuestas que sugieren

Es mágico, no comparo que tan amigable sea en proyectos grandes, pero se ve muy profesional e intuible

Para los que no gusten de importar librerias de 3ros, con solo importar
npm i @apollo/client se puede conseguir el mismo resultado.

Dejo documentacion:
https://www.apollographql.com/docs/react/get-started/
https://www.apollographql.com/docs/react/api/react/hooks/#function-signature

vengo por apollo pero este profesor es muy bueno, en un rato tomaré esta curso!

me sale este error:
.
`Warning: React.createElement: type is invalid – expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it’s defined in, or you might have mixed up default and named imports.

Check the render method of App.
in App
in ApolloProvider`
.
y este:

`Uncaught Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it’s defined in, or you might have mixed up default and named imports.

Check the render method of App.`
.
copie el codigo igual al profe y me sigue dando error, quien me ayuda?

npm i apollo-boost react-apollo graphql

Si quieren validar los tipos que manejan su componente y asignarle valores por default, pueden utilizar los propTypes.
Si no utilizas typescript, con los propTypes puedes validar los tipos.

https://es.reactjs.org/docs/typechecking-with-proptypes.html

Cuando se usa GraphQL y React Apollo es necesario utilizar alguna herramienta adicional para manejar el estado general de la app? algo asi como redux o React context…

Yo tengo un problema con los Styles, cuando ya hice la carga todo el css del PhotoCard se rompe 😕 o no esta reconociendo los estilos.

React Apollo es un cliente que nos va a permitir conectarnos a un servidor GraphQL.

![](

Puden usar el loading para saber cuando la información ya ha sido cargada

Por problemas con la instalación inicial del repositorio, preferí montar todo sobre react-create-app, y cómo el link graphql usaba now para hacer el deploy y ahora existe vercel, todo esto genera confusión al momento de trabajar en el curso.

Simplemente yo decidí correr en local el api y me funciona bien.

npm run start dev:api

Vamos a instalar npm i apollo-boost, una utilidad que nos permite inicializar nuestra conexión con un servidor de Apollo muy rápidamente y sin configuración, necesitaremos npm i react-apollo el cual es la integración de Apollo con React y finalmente npm i graphql.

GraphQL es un lenguaje creado por Facebook para obtener solo los datos que necesitamos en nuestra aplicación. Imaginemos que tenemos una REST API con WordPress, él nos entrega un JSON con mucha data innecesaria y solo queremos unos cuantos fields; GraphQL hace posible obtener únicamente esa data.

Configuraremos nuestro index.js para inicializar nuestro cliente de Apollo con GraphQL de la siguiente manera:

// index.js

{/…/}
import ApolloClient from 'apollo-boost’
import { ApolloProvider } from ‘react-apollo’

{/…/}

const client = new ApolloClient({
uri: ‘URL_DEL_BACKEND’ // En el proyecto usamos https://petgram-server.midudev.now.sh/graphql aquí debes colocar el tuyo
})

ReactDOM.render(
<ApolloProvider client={client}>
<App />
ApolloProvider>,
document.getElementById(‘app’)
)

Esta muy bueno GraphQL

WOW

No me queda claro como saber de forma genérica como construir una consulta en graphql, o como estructuro mi data para esto

Bueno yo use

npm install @apollo/react-hooks

Y use el customSkeleton pasandole una prop que basicamente cambia el diseño a cuadrado

import React from 'react'
import { PhotoCard } from '../PhotoCard/index'
import { useQuery } from '@apollo/react-hooks'
import { gql } from 'apollo-boost'
import {
  ListSkeleton,
  ListSkeletonBody,
  ListSkeletonPhoto
} from '../../styles/categorySkeleton'

const getPhotos = gql`
  query getPhotos {
    photos {
      id
      categoryId
      src
      likes
      userId
      liked
    }
  }
`

export const ListOfPhotoCard = () => {
  const { loading, error, data } = useQuery(getPhotos)

  if (error) console.log(error)

  return (
    <ul>
      {
        loading
          ? [1, 2, 3].map((key) =>
            <ListSkeleton key={key}>
              <ListSkeletonPhoto square />
              <ListSkeletonBody square />
            </ListSkeleton>
          )
          : data.photos.map((element, key) =>
            <PhotoCard key={key} {...element} />
          )
      }
    </ul>
  )
}

¿en cuál curso de Platzi aprendemos cómo hacer una API como la de Petgram?

Hola, qué tal? Vengo arrastrando errores con todo lo que fue el deploy de vercel. Alguien me da una mano para hacer el paso a paso de esto?

se está complicando… eso es bueno!

Genial, una conexión nativa con graphql y herramientas para cualquier demo!!!

Hola, les dejo el avance de mi repositorio para este proyecto hecho en Next.js:

https://github.com/danyel117/petgram-platzi/tree/gql

Genial, muy interesante todo. Gracias!!

Hola, tengo un problema en mi app, en la consola me aparece que tengo un problema de tipo post y no cargan las fotos que deberían venir de la url, si saben como solucionarlo me ayudarían mucho,
Ya cambie de url y ni así cambia