I need some pro advice here because I am going a little crazy. I am trying to create an graphql client combining Apollo and AppSync. I've done this approach before, but it is not working in another project I've just created. My situation is the following:
It seems that the client is connecting to my AppSync server (it is returning the __typename in the data), but It is not returning anything else. This is an example of the client use and the response I am getting:
const response = client
.query({
query: gql`
query MyQuery {
listSys_users {
items {
email
name
active
user_id
}
}
}
`,
})
.then(console.log);
I've tried to call the server making a POST request with axios and it works perfectly fine:
const axiosWrapper = () => {
const defaultOptions = {
baseURL: envConfig.graphQLUrl,
headers: { 'x-api-key': envConfig.graphQLApiKey },
};
const instance = axios.create(defaultOptions);
return instance;
};
axiosWrapper.post('', {
query: `
query MyQuery {
listSys_users {
items {
email
name
active
user_id
}
}
}
`,
}).then(console.log);
Now that You know the situation I will share my attempts on this:
Right know I have something like this:
The client.js:
import { ApolloLink } from 'apollo-link';
import { HttpLink } from 'apollo-link-http';
import ApolloClient from 'apollo-client';
import { InMemoryCache } from 'apollo-cache-inmemory';
import { createAuthLink } from 'aws-appsync-auth-link';
import config from './configs/env';
const { graphQLUrl, region, graphQLApiKey } = config;
const auth = {
type: 'API_KEY',
apiKey: graphQLApiKey,
// jwtToken: async () => (await Auth.currentSession()).getAccessToken().getJwtToken(),
};
const authMiddleware = new ApolloLink((operation, forward) => {
// add the authorization to the headers
operation.setContext(({ headers = {} }) => ({
headers: {
...headers,
'x-api-key': 'MY_API_KEY',
accept: 'application/json, text/plain, */*',
'content-type': 'application/json;charset=UTF-8',
},
}));
return forward(operation);
});
const client = new ApolloClient({
link: ApolloLink.from([authMiddleware, new HttpLink({ uri: graphQLUrl })]),
cache: new InMemoryCache(),
});
export default client;
The App.js:
import 'react-app-polyfill/ie11';
import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom';
import { ApolloProvider } from 'react-apollo';
import { Provider } from 'react-redux';
import App from './App';
import store from './store/reducers/rootReducer';
import './helpers/Translation/i18n';
import Login from './pages/Login';
import client from './client';
ReactDOM.render(
<ApolloProvider client={client}>
<BrowserRouter>
<Provider store={store}>
<Login>
<App />
</Login>
</Provider>
</BrowserRouter>
</ApolloProvider>,
document.getElementById('root')
);
Package.json:
"apollo-cache-inmemory": "^1.6.6",
"apollo-client": "^2.6.10",
"apollo-link": "^1.2.14",
"apollo-link-http": "^1.5.17",
"aws-amplify": "^3.3.27",
"aws-amplify-react-native": "^4.3.2",
"aws-appsync": "^4.1.4",
"aws-appsync-react": "^4.0.10",
"graphql": "^15.6.1",
"graphql-tag": "^2.12.5",
In this case the response is the same, it is connecting but it returns null in the items.
Yes, I know, I should use the creatAuthLink from aws-appsync-auth-link. Thats my second attempt.
My second attempt was using createAuthLink, but when I tried to use it It throw this error:
./node_modules/aws-appsync-auth-link/lib/auth-link.js
Module not found: Can't resolve '#apollo/client/core' in '/Users/VIU/GEOACTIO/smart-pockets/smart-pockets-react/node_modules/aws-appsync-auth-link/lib'
So I ended up installing and using the #apollo dependencies:
client.js:
import { ApolloClient, ApolloLink, HttpLink, InMemoryCache } from '#apollo/client';
import { createAuthLink } from 'aws-appsync-auth-link';
import config from './configs/env';
const { graphQLUrl, region, graphQLApiKey } = config;
const auth = {
type: 'API_KEY',
apiKey: graphQLApiKey
};
const client = new ApolloClient({
link: ApolloLink.from([
createAuthLink({ auth, region, url: graphQLUrl }),
new HttpLink({ uri: graphQLUrl }),
]),
cache: new InMemoryCache(),
});
export default client;
package.json:
"#apollo/client": "^3.4.16",
...all the same
Still getting the same response.. I won't bother You with more attempts. I've tried all the possible combination between these and more apollo / graphql / appsync dependencies and the outcome is always the same: either I get the null response with the __typename or I get a dependencies error.
NOTE: I've noticed that when using axios, the lambda attached to that resolver fires up as it should, but when using another approach, the lambda doesn't fire up, so obviously it won't return any data.
I know it is a long post but I am trying to explain the best I can my situation. And I can't create a sandbox code because I don't want to expose the API credentials.. Any ideas of what I am doing wrong?
Thanks in advance!!
Related
I am working on a react project and I want to setup an apollo client and pass access token to headers but my access token is in my globale state. I have tried creating the client within the component but I ended up with an infinite loop.
import {
ApolloClient,
ApolloProvider as Provider,
InMemoryCache,
} from '#apollo/client'
import React, { useEffect } from 'react'
import { StateProviderProps } from './../../types'
import { useAuthTokenState } from './../authToken/AuthTokenState'
const client = new ApolloClient({
uri: 'https://subdomain.domain.com/graphql',
cache: new InMemoryCache(),
// headers: {
// Authorization: 'Bearer' + state?.accessToken,
// },
})
const ApolloProvider = ({ children }: StateProviderProps) => {
const { state } = useAuthTokenState()
return <Provider client={client}>{children}</Provider>
}
export default ApolloProvider
i am looking for any idea that could help make this work.
thanks
Im using Urql as my Graphql Client for fetching data from my Shopify store but my headers are not showing up on my network requests.
The weird thing is that even if i dont send any headers, this x-shopify-storefront-access-token is still showing up as part of my request headers in the network tab. If i put any random key, value pair of headers they wont even show up.
I dont understand what is going on?
client.js
import { createClient } from 'urql'
export const urqlClient = createClient({
url: `https://${process.env.GATSBY_SHOPIFY_STORE_URL}/api/2022-07/graphql.json`,
fetchOptions: () => {
return {
headers: {
'X-Shopify-Storefront-Access-Token':
'my access token string',
},
}
},
})
And im providing it at the root level for every page
gatsby.browser.js
import * as React from 'react'
import { StoreProvider } from './src/context/store-context'
import './src/styles/reset.css'
import './src/styles/variables.css'
import './src/styles/global.css'
import { urqlClient } from './src/context/client'
import { Provider } from 'urql'
export const wrapRootElement = ({ element }) => (
<Provider value={urqlClient}>
<StoreProvider>{element}</StoreProvider>
</Provider>
)
I am going to get user from context and use it in header in nextjs strapi apollo graphql project User is accessable in App function but outside its giving above error. Is context values accessable outside function if yes how can I access it if no how to structure it so that I can use it in request header.
import "../styles/globals.css";
import Layout from "../components/Layout";
import { Provider } from "../context/AppContext";
import Cookies from "js-cookie";
import withApollo from "next-with-apollo";
import { BACKEND_URL } from "../helpers";
import React, { useContext } from "react";
import { AppContext } from "../context/AppContext";
import { ApolloClient, ApolloProvider, InMemoryCache } from "#apollo/client";
const { user } = useContext(AppContext);
console.log("user from context in _app", user);
function App({ Component, pageProps, apollo }) {
return (
<Provider>
<ApolloProvider client={apollo}>
<Layout>
<Component {...pageProps} />
</Layout>
</ApolloProvider>
</Provider>
);
}
export default withApollo(({ initialState, headers }) => {
return new ApolloClient({
uri: `${BACKEND_URL}/graphql`,
cache: new InMemoryCache().restore(initialState || {}),
...(user && {
headers: {
authorization: `Bearer ${user.token}`,
},
}),
});
})(App);
On my machine, Next.js didn't work if, in Windows Terminal, the disk letter (for example, C:) of the "current directory" was written in lowercase (as c: in this example).
After I changed the current directory from c:\dev\project to C:\dev\project, the error went away.
Source: https://github.com/vercel/next.js/issues/7626#issuecomment-541430221
I'm trying to get more familiar with graphql using react-apollo and I'm stuck for a while now.
I just want to query movies by name from a gql server, but no luck so far. My problem is that when I make the request I get an error that says:
POST https://tmdb.sandbox.zoosh.ie/dev/grphql 400
However I want to make a GET request. I tried to specify the request method in the apollo client, but no luck either.
index.js
import React from "react";
import ReactDOM from "react-dom/client";
import {
ApolloClient,
InMemoryCache,
ApolloProvider,
HttpLink,
} from "#apollo/client";
import "./index.css";
import App from "./App";
const client = new ApolloClient({
cache: new InMemoryCache(),
link: new HttpLink({
uri: "https://tmdb.sandbox.zoosh.ie/dev/grphql",
method: "GET",
}),
connectToDevTools: true,
});
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
<React.StrictMode>
<ApolloProvider client={client}>
<App />
</ApolloProvider>
</React.StrictMode>
);
MovieList.js
import React from "react";
import { useQuery, gql } from "#apollo/client";
const SEARCH_MOVIES = gql`
query SearchMovies($movieTitle: String!) {
movies(query: $movieTitle) {
id
name
score
genres {
name
}
overview
releaseDate
}
}
`;
const MovieList = () => {
const { loading, error, data } = useQuery(SEARCH_MOVIES, {
variables: {
movieTitle: "fight club",
},
});
if (loading) return <p>Loading...</p>;
if (error) return <p>Error :(</p>;
return (
<>
<div>MovieList</div>
<ol>
{data.movies.map((movie) => (
<li key={movie.id}>{movie.name}</li>
))}
</ol>
</>
);
};
export default MovieList;
Now I would appriciate, if someone could help me out what the problem might be, because my eyes can't see it. I searched all over the internet, but didn't find any usable resource regarding the topic.
Thanks for the replies in advance!:)
You can use useGETForQueries as constructor options.
docs
const client = new ApolloClient({
cache: new InMemoryCache(),
link: new HttpLink({
uri: "https://tmdb.sandbox.zoosh.ie/dev/grphql",
useGETForQueries: true
}),
connectToDevTools: true,
});
I'm new to using GraphQL in React and have been moving a project from a REST API to a new GraphQL one. As part of this, I wanted to setup mock data to work on the application independent of the GQL API being completed. I've spent a bunch of time trying to follow the Apollo and GraphQL Tools docs but no matter what, I can't seem to get the mock resolvers to work properly. For context, I am using this in a NextJS/React app, and here's a minimum example of what I'm trying to do:
Setup App.js
import React from 'react';
import ApolloClient from 'apollo-client';
import { ApolloProvider } from 'react-apollo';
import { SchemaLink } from 'apollo-link-schema';
import { InMemoryCache } from 'apollo-cache-inmemory';
import { makeExecutableSchema } from '#graphql-tools/schema';
import { addMocksToSchema } from '#graphql-tools/mock';
export default function App() {
const schema = makeExecutableSchema({typeDefs:`
type Query {
getPerson: Person!
}
type Person {
name: String!
}
`});
const mocks = {
Query: () => ({
getPerson: () => ({
name: () => "Name"
})
})
}
addMocksToSchema({ mocks, schema });
const link = new SchemaLink({ schema });
const client = new ApolloClient({
link,
cache: new InMemoryCache(),
connectToDevTools: true
});
return (
<ApolloProvider client={client}>
<Person />
</ApolloProvider>
)
}
Person.js
import React from 'react';
import { useQuery } from '#apollo/react-hooks';
import gql from 'graphql-tag';
export default function Person() {
const { loading, error, data } = useQuery(gql`
query PersonQuery {
getPerson {
name
}
}
`, {
errorPolicy: 'all'
});
console.log(data);
if (loading) return "Loading...";
if (error) console.log(error);
return (
<h1>{data.getPerson.name}<h1>
)
}
Looking at the console.log(error) result yields the error Cannot return null for non-nullable field Query.getPerson and making it a nullable field just returns { getPerson: null } of course. I've tried returning the resolver results as objects vs functions. Logging within the resolvers shows the Query part is being executed but nothing nested within that.
Am I setting something up incorrectly? I also tried not passing in custom mocks as suggested should be possible based on the graphql-tools docs, but to no avail. I also saw this issue from the apollo hooks GitHub that said the newest version of hooks broke the usage of addMocksToSchema, so I tried using the suggested 3.1.3 version but again no luck. Any help would be greatly appreciated!
You need to provide the mock to the client, not the plain schema.
const schemaWithMocks = addMocksToSchema({
schema,
mocks: {},
preserveResolvers: false,
});
const client = new ApolloClient({
// link: new SchemaLink({ schema }); < -- REPLACE THIS
link: (new SchemaLink({ schema: schemaWithMocks }) as unknown) as ApolloLink, // https://github.com/apollographql/apollo-link/issues/1258
cache: new InMemoryCache(),
connectToDevTools: true,
});
Now console.log(data) prints
{"getPerson": {"__typename": "Person", "name": "Name"}} 🎉