I am trying to access a react context values within the setContext function for my Apollo client. I would like to be able to dynamically update the header for each graphql request with the react context value. But I face an error with no visible error messages in the logs. Is what I am trying to do possible?
import React, { useState, useContext } from "react";
import { render } from "react-dom";
import ApolloClient from "apollo-client";
import { ApolloProvider } from "react-apollo";
import { createHttpLink } from "apollo-link-http";
import { setContext } from "apollo-link-context";
import { InMemoryCache } from "apollo-cache-inmemory";
import Select from "./Select";
import CurrencyContext from "./CurrencyContext";
import ExchangeRates from "./ExchangeRates";
const httpLink = createHttpLink({
uri: "https://48p1r2roz4.sse.codesandbox.io"
});
const authLink = setContext((_, { headers }) => {
const token = localStorage.getItem("token");
const currency = useContext(CurrencyContext); // How to access React context here ?
return {
headers: {
...headers,
authorization: token ? `Bearer ${token}` : "",
currencyContext: currency ? currency : {}
}
};
});
const client = new ApolloClient({
link: authLink.concat(httpLink),
cache: new InMemoryCache()
});
const currencies = ["USD", "EUR", "BTC"];
const App = () => {
const [currency, setCurrency] = useState("USD");
return (
<ApolloProvider client={client}>
<CurrencyContext.Provider value={currency}>
<h2>Provide a Query variable from Context 🚀</h2>
<Select value={currency} setValue={setCurrency} options={currencies} />
<ExchangeRates />
</CurrencyContext.Provider>
</ApolloProvider>
);
};
render(<App />, document.getElementById("root"));
You can use useImperativeHandle to access the context values from outside React tree
In the context file create a ref
export const ContextRef = React.createRef();
Then inside the Context add
React.useImperativeHandle(ContextRef, () => contextValues);
Finally, you can access the context values with
ContextRef.current.token
See: https://reactjs.org/docs/hooks-reference.html#useimperativehandle
Related
I've got this react component throwing at me this error:
Uncaught TypeError: link.request is not a function
at ApolloLink.execute (ApolloLink.js:65)
at QueryManager.getObservableFromLink (QueryManager.js:716)
at QueryManager.getResultsFromLink (QueryManager.js:752)
at resultsFromLink (QueryManager.js:999)
I'm not sure where this comes from, it's from the useQuery line in this component:
import { useQuery, gql } from "#apollo/client";
import React from "react"
import PropTypes from "prop-types"
const GET_INSURANCES = gql`
query insurances {
insurances {
id
provider
product
user{
name
email
}
}
}
`;
function App() {
// console.log('running graphql query');
const { loading, error, data } = useQuery(GET_INSURANCES);
// console.log('graphql query done');
if (loading) return <div>Loading...</div>;
if (error) return <div>Error : ${error.message}</div>;
return (
<React.Fragment>
<p>{data}</p>
</React.Fragment>
);
}
export default App
Any ideas?
update
here's the code of the wrapping class
import {
ApolloClient,
InMemoryCache,
ApolloProvider
} from "#apollo/client";
import React from "react"
import PropTypes from "prop-types"
import App from './App';
const client = new ApolloClient({
link: 'http://localhost:3000/graphql',
cache: new InMemoryCache()
} )
class InsuranceStatus extends React.Component {
render () {
return (
<ApolloProvider client={client}>
<React.Fragment>
Status: {this.props.status}
<App/>
</React.Fragment>
</ApolloProvider>
);
}
}
InsuranceStatus.propTypes = {
status: PropTypes.string
};
export default InsuranceStatus
I solved this by importing createHttpLink from #apollo/client, and then setting my link like this:
const httpLink = createHttpLink({
uri: 'http://localhost:3000'
});
const client = new ApolloClient({
link: httpLink,
cache: new InMemoryCache()
})
I have seen plenty of tutorials setting the link as you did, but I only got past the error message by using createHttpLink
I am new to NextJS. I have a page that needs to display real-time data pulled from a Hasura GraphQL backend.
In other non-NextJS apps, I have used GraphQL subscriptions with the Apollo client library. Under the hood, this uses websockets.
I can get GraphQL working in NextJS when it's not using subscriptions. I'm pretty sure this is running on the server-side:
import React from "react";
import { AppProps } from "next/app";
import withApollo from 'next-with-apollo';
import { ApolloProvider } from '#apollo/react-hooks';
import ApolloClient, { InMemoryCache } from 'apollo-boost';
import { getToken } from "../util/auth";
interface Props extends AppProps {
apollo: any
}
const App: React.FC<Props> = ({ Component, pageProps, apollo }) => (
<ApolloProvider client={apollo}>
<Component {...pageProps}/>
</ApolloProvider>
);
export default withApollo(({ initialState }) => new ApolloClient({
uri: "https://my_hasura_instance.com/v1/graphql",
cache: new InMemoryCache().restore(initialState || {}),
request: (operation: any) => {
const token = getToken();
operation.setContext({
headers: {
authorization: token ? `Bearer ${token}` : ''
}
});
}
}))(App);
And I use it this way:
import { useQuery } from '#apollo/react-hooks';
import { gql } from 'apollo-boost';
const myQuery = gql`
query {
...
}
`;
const MyComponent: React.FC = () => {
const { data } = useQuery(myQuery);
return <p>{JSON.stringify(data)}</p>
}
However, I would instead like to do this:
import { useSubscription } from '#apollo/react-hooks';
import { gql } from 'apollo-boost';
const myQuery = gql`
subscription {
...
}
`;
const MyComponent: React.FC = () => {
const { data } = useSubscription(myQuery);
return <p>{JSON.stringify(data)}</p>
}
What I've tried
I've tried splitting the HttpLink and WebsocketLink elements in the ApolloClient, like so:
import React from "react";
import { AppProps } from "next/app";
import { ApolloProvider } from '#apollo/react-hooks';
import withApollo from 'next-with-apollo';
import { InMemoryCache } from "apollo-cache-inmemory";
import ApolloClient from "apollo-client";
import { split } from 'apollo-link';
import { HttpLink } from 'apollo-link-http';
import { WebSocketLink } from 'apollo-link-ws';
import { getMainDefinition } from 'apollo-utilities';
import { getToken } from "../util/auth";
interface Props extends AppProps {
apollo: any
}
const App: React.FC<Props> = ({ Component, pageProps, apollo }) => (
<ApolloProvider client={apollo}>
<Component {...pageProps}/>
</ApolloProvider>
);
const wsLink = new WebSocketLink({
uri: "wss://my_hasura_instance.com/v1/graphql",
options: {
reconnect: true,
timeout: 10000,
connectionParams: () => ({
headers: {
authorization: getToken() ? `Bearer ${getToken()}` : ""
}
})
},
});
const httpLink = new HttpLink({
uri: "https://hasura-g3uc.onrender.com/v1/graphql",
});
const link = process.browser ? split(
({ query }) => {
const definition = getMainDefinition(query);
return (
definition.kind === 'OperationDefinition' &&
definition.operation === 'subscription'
);
},
wsLink,
httpLink
) : httpLink;
export default withApollo(({ initialState }) => new ApolloClient({
link: link,
cache: new InMemoryCache().restore(initialState || {}),
}))(App);
But when I load the page, I get an Internal Server Error, and this error in the terminal:
Error: Unable to find native implementation, or alternative implementation for WebSocket!
It seems to me that the ApolloClient is then being generated on the server-side, where there is no WebSocket implementation. How can I make this happen on the client-side?
Found workaround to make it work, take look at this answer https://github.com/apollographql/subscriptions-transport-ws/issues/333#issuecomment-359261024
the reason was due to server-side rendering; these statements must run in the browser, so we test if we have process.browser !!
relevant section from the attached github link:
const wsLink = process.browser ? new WebSocketLink({ // if you instantiate in the server, the error will be thrown
uri: `ws://localhost:4000/subscriptions`,
options: {
reconnect: true
}
}) : null;
const httplink = new HttpLink({
uri: 'http://localhost:3000/graphql',
credentials: 'same-origin'
});
const link = process.browser ? split( //only create the split in the browser
// split based on operation type
({ query }) => {
const { kind, operation } = getMainDefinition(query);
return kind === 'OperationDefinition' && operation === 'subscription';
},
wsLink,
httplink,
) : httplink;
This answer seems to be more actual
https://github.com/apollographql/subscriptions-transport-ws/issues/333#issuecomment-775578327
You should install ws by npm i ws and add webSocketImpl: ws to WebSocketLink argument.
import ws from 'ws';
const wsLink = new WebSocketLink({
uri: endpoints.ws,
options: {
reconnect: true,
connectionParams: () => ({
...getToken() && {Authorization: getToken()}
})
},
webSocketImpl: ws
});
Solution: Make wsLink a function variable like the code below.
// src/apollo.ts
import { ApolloClient, HttpLink, InMemoryCache } from "#apollo/client";
import { GraphQLWsLink } from "#apollo/client/link/subscriptions";
import { createClient } from "graphql-ws";
const httpLink = new HttpLink({
uri: 'http://localhost:3000/graphql'
});
const wsLink = () => {
return new GraphQLWsLink(createClient({
url: 'ws://localhost:3000/graphql'
}));
}
export const apolloClient = new ApolloClient({
link: typeof window === 'undefined' ? httpLink : wsLink(),
cache: new InMemoryCache(),
});
// pages/_app.tsx
import { ApolloProvider } from "#apollo/client";
import { apolloClient } from "../src/apollo";
function MyApp({ Component, pageProps }) {
return (
<ApolloProvider client={apolloClient}>
<Component {...pageProps} />
</ApolloProvider>
);
}
I'm trying to add authorization token to the apollo client in react js to let the users login ...
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter as Router } from 'react-router-dom';
import { ThemeProvider } from 'react-jss';
import Theme from 'resources/theme';
import Routes from 'routes';
import './index.css';
import * as serviceWorker from './serviceWorker';
import { Auth0Provider } from "#auth0/auth0-react";
import 'bootstrap/dist/css/bootstrap.min.css';
import ReactNotification from 'react-notifications-component'
import './components/orders/fonts/NotoSansJP-Regular.otf'
import 'react-notifications-component/dist/theme.css'
import { ApolloProvider , ApolloClient, InMemoryCache } from '#apollo/client';
import { useAuth0 } from "#auth0/auth0-react";
const client = new ApolloClient({
uri: process.env.REACT_APP_API_BACK ,
headers: {
Authorization: `Bearer ${accessToken}` // doesn’t work
},
cache: new InMemoryCache()
});
ReactDOM.render(
<Auth0Provider
domain= {process.env.REACT_APP_AUTH0_DOMAIN }
clientId= {process.env.REACT_APP_AUTH0_CLIENT_ID}
redirectUri={window.location.origin}
audience={process.env.REACT_APP_AUTH0_AUDIENCE}
scope="warehouse"
>
<ApolloProvider client={client}>
<ThemeProvider theme={Theme}>
<Router>
<ReactNotification />
<Routes />
</Router>
</ThemeProvider>,
</ApolloProvider>
</Auth0Provider>,
document.getElementById('root')
);
serviceWorker.unregister();
to get the token i need to import :
import { useAuth0 } from "#auth0/auth0-react";
the add this lines :
const { getAccessTokenSilently } = useAuth0();
but this cannot be done in index.js i think
to get the token :
const accessToken = await getAccessTokenSilently
this what i found in the docs and from google search , but i think it cannot be done in my case , most tutorials show how to get the user data ( including the token) in a profile page but that's not wha I want .
i want to pass it to the client in index.js
This is what I ended up doing:
import {
ApolloProvider,
ApolloClient,
InMemoryCache,
HttpLink,
} from '#apollo/client';
import { setContext } from '#apollo/link-context';
import { useAuth0 } from '#auth0/auth0-react';
const ApolloProviderWithAuth0 = ({ children }) => {
const { getAccessTokenSilently } = useAuth0();
const httpLink = new HttpLink({
uri: process.env.REACT_APP_GRAPHQL_URI,
});
const authLink = setContext(async (_, { headers, ...rest }) => {
let token;
try {
token = await getAccessTokenSilently();
} catch (error) {
console.log(error);
}
if (!token) return { headers, ...rest };
return {
...rest,
headers: {
...headers,
authorization: `Bearer ${token}`,
},
};
});
const client = React.useRef();
if (!client.current) {
client.current = new ApolloClient({
link: authLink.concat(httpLink),
cache: new InMemoryCache(),
});
}
return (
<ApolloProvider client={client.current}>
{children}
</ApolloProvider>
);
};
export { ApolloProviderWithAuth0 };
And then use it as Provider in your App component.
You need to create dedicated component for
function useToken() {
const { getAccessTokenSilently } = useAuth0();
const [token, setToken] = useState(null);
useEffect(() => { getAccessTokenSilently().then(setToken) }, [])
return token;
}
function MyApolloProvider({ children }) {
const token = useToken();
// useRef instead of useMemo to make sure client is not re-created randomly
const clientRef = useRef(null);
if (token && !clientRef.current) {
// This code should only be executed once.
clientRef.current = new ApolloClient(/**/)
}
if (!clientRef.current) {
// Now we have to wait until client is initialized with token, so you might want to add some spinner
return null;
}
return <ApolloClient client={clientRef.current} >{children}</ApolloClient>
}
And then you use it instead of original ApolloProvider in yours ReactDOM.render.
If token changes then things become a bit more difficult.
https://www.apollographql.com/docs/react/networking/authentication/#header
You still use similar approach:
function useToken() { /* should return actual token and update it if changed */ }
function MyApolloProvider({ children }) {
const token = useToken();
const tokenRef = useRef(token);
const clientRef = useRef(null);
tokenRef.current = token; // make sure that tokenRef always has up to date token
if (!clientRef.current) {
// This function is called on each request individually and it takes token from ref
const authLink = setContext((_, { headers }) => {
// similar to documentation example, but you read token from ref
const token = tokenRef.current;
return {
headers: {
...headers,
authorization: `Bearer ${token}`,
}
}
});
clientRef.current = new ApolloClient(
link: authLink.concat(httpLink),
// ...
)
}
}
Usage in index.js regardless of first or second case:
ReactDOM.render(
<Auth0Provider /* options */>
<MyApolloProvider>
{/* ... */}
</MyApolloProvider>
</Auth0Provider>,
document.getElementById("root")
);
Main thing here is that MyApolloProvider should be within Auth0Provider to gain access to the token.
I start building my ApolloClient. It looks like this
import { ApolloClient, InMemoryCache, HttpLink } from "#apollo/client"
//import { RestLink } from "apollo-link-rest"
import fetch from "isomorphic-fetch"
const xml2js = require("xml2js")
const parseXmlResponseToJson = xml => {
// The function is not being fired
const { parseString } = xml2js
let jsonFeed = null
parseString(xml, function (err, result) {
jsonFeed = result
})
return jsonFeed
}
const restLink = new HttpLink({
uri:
"https://cors-anywhere.herokuapp.com/https://www.w3schools.com/xml/note.xml",
responseTransformer: async response =>
response.text().then(xml => parseXmlResponseToJson(xml)),
fetch,
})
export const client = new ApolloClient({
link: restLink,
cache: new InMemoryCache(),
})
The provider looks like this
import React from "react"
import { client } from "../apollo"
import { ApolloProvider as Provider } from "#apollo/client"
function ApolloProvider({ children }) {
return <Provider client={client}>{children}</Provider>
}
export default ApolloProvider
And the query I try to use looks like this
import React from "react"
import gql from "graphql-tag"
import { useQuery } from "#apollo/client"
const APOLLO_QUERY = gql`
{
note {
to
from
heading
body
}
}
`
const Component = () => {
const { loading, error, data } = useQuery(APOLLO_QUERY)
console.log("Apollo data", loading, error, data)
The error will return with Unexpected token < in JSON at position 2
// ...
I have been struggling with this for days. What am I doing wrong? I try to make it work with w3schools very simply xml example https://www.w3schools.com/xml/note.xml
I am new to NextJS. I have a page that needs to display real-time data pulled from a Hasura GraphQL backend.
In other non-NextJS apps, I have used GraphQL subscriptions with the Apollo client library. Under the hood, this uses websockets.
I can get GraphQL working in NextJS when it's not using subscriptions. I'm pretty sure this is running on the server-side:
import React from "react";
import { AppProps } from "next/app";
import withApollo from 'next-with-apollo';
import { ApolloProvider } from '#apollo/react-hooks';
import ApolloClient, { InMemoryCache } from 'apollo-boost';
import { getToken } from "../util/auth";
interface Props extends AppProps {
apollo: any
}
const App: React.FC<Props> = ({ Component, pageProps, apollo }) => (
<ApolloProvider client={apollo}>
<Component {...pageProps}/>
</ApolloProvider>
);
export default withApollo(({ initialState }) => new ApolloClient({
uri: "https://my_hasura_instance.com/v1/graphql",
cache: new InMemoryCache().restore(initialState || {}),
request: (operation: any) => {
const token = getToken();
operation.setContext({
headers: {
authorization: token ? `Bearer ${token}` : ''
}
});
}
}))(App);
And I use it this way:
import { useQuery } from '#apollo/react-hooks';
import { gql } from 'apollo-boost';
const myQuery = gql`
query {
...
}
`;
const MyComponent: React.FC = () => {
const { data } = useQuery(myQuery);
return <p>{JSON.stringify(data)}</p>
}
However, I would instead like to do this:
import { useSubscription } from '#apollo/react-hooks';
import { gql } from 'apollo-boost';
const myQuery = gql`
subscription {
...
}
`;
const MyComponent: React.FC = () => {
const { data } = useSubscription(myQuery);
return <p>{JSON.stringify(data)}</p>
}
What I've tried
I've tried splitting the HttpLink and WebsocketLink elements in the ApolloClient, like so:
import React from "react";
import { AppProps } from "next/app";
import { ApolloProvider } from '#apollo/react-hooks';
import withApollo from 'next-with-apollo';
import { InMemoryCache } from "apollo-cache-inmemory";
import ApolloClient from "apollo-client";
import { split } from 'apollo-link';
import { HttpLink } from 'apollo-link-http';
import { WebSocketLink } from 'apollo-link-ws';
import { getMainDefinition } from 'apollo-utilities';
import { getToken } from "../util/auth";
interface Props extends AppProps {
apollo: any
}
const App: React.FC<Props> = ({ Component, pageProps, apollo }) => (
<ApolloProvider client={apollo}>
<Component {...pageProps}/>
</ApolloProvider>
);
const wsLink = new WebSocketLink({
uri: "wss://my_hasura_instance.com/v1/graphql",
options: {
reconnect: true,
timeout: 10000,
connectionParams: () => ({
headers: {
authorization: getToken() ? `Bearer ${getToken()}` : ""
}
})
},
});
const httpLink = new HttpLink({
uri: "https://hasura-g3uc.onrender.com/v1/graphql",
});
const link = process.browser ? split(
({ query }) => {
const definition = getMainDefinition(query);
return (
definition.kind === 'OperationDefinition' &&
definition.operation === 'subscription'
);
},
wsLink,
httpLink
) : httpLink;
export default withApollo(({ initialState }) => new ApolloClient({
link: link,
cache: new InMemoryCache().restore(initialState || {}),
}))(App);
But when I load the page, I get an Internal Server Error, and this error in the terminal:
Error: Unable to find native implementation, or alternative implementation for WebSocket!
It seems to me that the ApolloClient is then being generated on the server-side, where there is no WebSocket implementation. How can I make this happen on the client-side?
Found workaround to make it work, take look at this answer https://github.com/apollographql/subscriptions-transport-ws/issues/333#issuecomment-359261024
the reason was due to server-side rendering; these statements must run in the browser, so we test if we have process.browser !!
relevant section from the attached github link:
const wsLink = process.browser ? new WebSocketLink({ // if you instantiate in the server, the error will be thrown
uri: `ws://localhost:4000/subscriptions`,
options: {
reconnect: true
}
}) : null;
const httplink = new HttpLink({
uri: 'http://localhost:3000/graphql',
credentials: 'same-origin'
});
const link = process.browser ? split( //only create the split in the browser
// split based on operation type
({ query }) => {
const { kind, operation } = getMainDefinition(query);
return kind === 'OperationDefinition' && operation === 'subscription';
},
wsLink,
httplink,
) : httplink;
This answer seems to be more actual
https://github.com/apollographql/subscriptions-transport-ws/issues/333#issuecomment-775578327
You should install ws by npm i ws and add webSocketImpl: ws to WebSocketLink argument.
import ws from 'ws';
const wsLink = new WebSocketLink({
uri: endpoints.ws,
options: {
reconnect: true,
connectionParams: () => ({
...getToken() && {Authorization: getToken()}
})
},
webSocketImpl: ws
});
Solution: Make wsLink a function variable like the code below.
// src/apollo.ts
import { ApolloClient, HttpLink, InMemoryCache } from "#apollo/client";
import { GraphQLWsLink } from "#apollo/client/link/subscriptions";
import { createClient } from "graphql-ws";
const httpLink = new HttpLink({
uri: 'http://localhost:3000/graphql'
});
const wsLink = () => {
return new GraphQLWsLink(createClient({
url: 'ws://localhost:3000/graphql'
}));
}
export const apolloClient = new ApolloClient({
link: typeof window === 'undefined' ? httpLink : wsLink(),
cache: new InMemoryCache(),
});
// pages/_app.tsx
import { ApolloProvider } from "#apollo/client";
import { apolloClient } from "../src/apollo";
function MyApp({ Component, pageProps }) {
return (
<ApolloProvider client={apolloClient}>
<Component {...pageProps} />
</ApolloProvider>
);
}