I want to request to GraphQL Server from Relay only Queries without Fragments.
For example with simple relay app at the link: https://facebook.github.io/relay/prototyping/playground.html#/, this always post to GraphQL server a query inculde Fragments like that:
query GreetingsQuery {
greetingsSchema {
...F0
}
}
fragment F0 on GreetingsQL {
hello
}
But I just want to post a single query without any fragment inside, something like that:
query UserQuery {
users() {
id
name
},
}
Any solutions for that?
You can inline the entire query in your Relay user queries. No need for fragments. Also make sure you don't have an empty parentheses if you don't have query params.
Related
I've made a datasource API to fetch an external API and retrieve it in JSON format. Everything works perfectly, I can call the query in playground and get all the data.
But when I call that query from the react / apollo client side, the data from the query is always returning null. I'm guessing it has something to do with the scalar type.
Apollo Client Query
// Drops
export const GET_DROPS = gql`
query getDrops {
getDrops
}
`;
Drop Resolver (Server)
import GraphQLJSON from 'graphql-type-json';
export default {
JSON: GraphQLJSON,
Query: {
getDrops: async (_source, _args, { dataSources }) => {
const data = await dataSources.dropsAPI.fetchDrops();
return data.result.data;
}
}
};
Drop Schema
export default gql`
scalar JSON
extend type Query {
getDrops: JSON
}
`;
Apollo Client doesn't currently support custom scalar serialization on the client side at the moment. We do have an older feature requestt to add better support for them and are considering this for a future enhancement to our client library.
Feel free to follow this Github issue if you are interested in this capability, also adding a comment about your use case will help us better understand your needs as well. Thank you!
I don't know how to manage query string to react.
I made component class and it is composed of 3 other components.
It is not show data first time. Users have to select or click but
ton.
It is work well.
But I received a new feature. ;(
When users connect my site who copied url, the page has to show data immediately.
So I added query string. But I don't know when I call function.
I installed query-string.
I tried to use 'shouldComponentUpdate' function, but it was not work.
shouldComponentUpdate(nextProps, nextState) {
if (this.props.location.search.ids !== nextProps.location.search.ids) {
// call some function....
}
return true;
}
for example,
Users connect localhost:3000/my/home
It's ok.
But users connect localhost:3000/my/home?ids=1
It's not ok.
Summary.
I want to show data immediately when user connect to the site by query-string.
to fetch data, the most common way to call api is calling in componentDidMount.
https://reactjs.org/docs/faq-ajax.html
if you are using react-router for your app, you can easily get query string with following feature of react-router .
https://reacttraining.com/react-router/web/example/query-parameters
and then pass query string to your api.
I added componentDidMount and call myfunction.
componentDidMount(){
const query = queryString.parse(this.props.location.search);
if(query.ids !== 'undefined'){
let slice_ids = [];
slice_ids = query.ids.split(',');
if(slice_ids.length > 0){
this.myfunction(1);
}
}
}
Users can access the url.
Thanks #gnujoow
I have backend on Express with Apollo Graph.
In my client React app im do next:
apollo codegen:generate --excludes=node_modules/* --includes=**/*.tsx --target typescript --tagName gql --outputFlat generate
I wait for folder generated, but this command gives me next error:
Error: There are multiple definitions for the herewas operation.
All operations in a project must have unique names.
If generating types, only the types for the first definition
found will be generated.at GraphQLClientProject.checkForDuplicateOperations
(....\node_modules\apollo\node_modules\apollo-language-server\lib\project\base.js:129:31)
.........
.........
Generating query files with 'typescript' target
> Apollo does not support anonymous operations
Also i have apollo.config.js:
module.exports = {
client: {
service: {
url: "http://localhost:4000/graphql"
}
}
}
I do not understand where to dig, the code took from Google search
Apollo does not support anonymous operations
You should give your query/mutation operation a name :
This will work:
query SOME_NAME {
users {
age
}
}
This will NOT work (note that query name is missing):
query {
users {
age
}
}
Also you can check this thread:
https://github.com/apollographql/apollo-tooling/issues/184
operation name required.
Something like below, required the name.
query {
users {
name
}
}
I'm new to GraphQL and was curious if I could use it to query an external, third-part API for data. I have an express backend and a react frontend and I'm sending a GET request to a third party API for the price of precious metals.
The API responds with one big object that is filled with things I don't need but I still get via HTTP. For example, API is returning this:
{
"gold_bid_usd_toz": "1303.58",
"gold_ask_usd_toz": "1304.58",
"gold_change_dollar_usd_toz": "1.23",
"gold_change_percent_usd_toz": "0.09%",
"gold_high_usd_toz": "1306.51",
"gold_low_usd_toz": "1299.85",
"gold_londonfix_am": "1320.7",
"gold_londonfix_pm": "1319.92",
"silver_bid_usd_toz": "16.5",
"silver_ask_usd_toz": "16.6",
"silver_change_dollar_usd_toz": "-0.02",
"silver_change_percent_usd_toz": "-0.13%",
"silver_high_usd_toz": "16.6",
"silver_low_usd_toz": "16.46",
"silver_londonfix": "16.6",
...LOTS MORE...
}
If I'm only interested in two of the properties, can I do something like this:
query {
gold_bid_usd_toz
silver_bid_usd_toz
}
Just not sure if I have to control backend data in order to use GraphQL. Thanks.
You can return your request response directly from a resolver as it is.
Then in a frontend query matching this resolver, get only what you asked for.
Backend:
rootQuery {
resolverName: () => getThirdParty
}
Frontend:
query {
resolverName {
whatYouWant1
whatYouWant2
}
}
Both your query and resolver should match your graphql schema but not the third party response.
I am trying to build an application using GraphQL and React Relay.
As part of this I have created a root query with the following specification:
query {
AllServices {
edges {
node {
id
}
}
}
}
So I have created a mutation - which works well - called CreateGithubService.
Here is a snippet from the Relay mutation:
getFatQuery() {
return Relay.QL`
fragment on CreateGithubServicePayload {
createdService
}
`
}
getConfigs() {
return [{
type: "REQUIRED_CHILDREN",
children: [
Relay.QL`
fragment on CreateGithubServicePayload {
createdService {
id
}
}
`
]
}]
}
The problem I have is that this is not causing the views which rely on the information to update.
My AllServices query is not refetched and I am unable to specify it in the Fat Query.
How can I setup my mutation to add the element to the all services query?
Thanks!
REQUIRED_CHILDREN will not update the local graph; it's strictly for fetching extra data that is only used in the success callback of the mutation update. In fact, it's not even documented outside of the source code, so I'm not sure how you decided to use it like this...
Although you haven't said so, I assume you want this new node (createdService) to be added to the AllServices connection? If so, you need to tell Relay that your mutation affects that connection:
At the moment, Relay basically assumes all mutations affect nodes, not arbitrary queries. To my knowledge, you won't be able to configure a mutation to update a non-node root query. Therefore, you should add a node at the root that acts as the parent of your AllServices connection (the convention for this is typically viewer). In other words, make it work like this: query { viewer { AllServices { ... } } }
Your mutation payload should always return everything that has been changed, not just the new data. That means you need a way to refetch the AllServices connection from the payload. Once you add the viewer node to your schema, you can return that node in the mutation payload and change your fat query to specify that the connection has changed, e.g.: fragment on CreateGithubServicePayload { viewer { AllServices } }
Given those two schema changes, you can then configure your mutation using FIELDS_CHANGE and specify the fieldIDs like { viewer: this.props.viewer.id }